论坛发帖可以使用的HTML代码

风萧

HTML iframe 标签用法
一、最简单嵌入网页

1. <!-- src 填网页地址，width宽 height高 -->
   
2. <iframe src="https://www.baidu.com" width="800" height="500" frameborder="0"></iframe>

复制代码

去掉边框，百分比自适应

1. <iframe
   
2.     src="./test.html"
   
3.     width="100%"
   
4.     height="600px"
   
5.     frameborder="0">
   
6. </iframe>

复制代码

frameborder 已经废弃，更推荐用 CSS：

1. <iframe src="xxx" style="border:none;width:100%;height:600px;"></iframe>

复制代码

二、常用属性

属性	说明
src	要嵌入页面的 URL，可以是网址、本地 html 文件
width	框架宽度，支持像素px、百分比%
height	框架高度
frameborder	是否显示边框，0去掉边框（旧属性）
border:none css 方式去掉边框，推荐
scrolling	是否出现滚动条：yes/no/auto
name	框架名字，可以被 a 标签 target 指向
allow	权限控制，允许视频全屏、麦克风等
allowfullscreen	允许 iframe 里面页面全屏播放视频
sandbox	安全沙箱，限制 iframe 页面权限，防攻击

三、a 标签跳转到 iframe 内部显示
利用`name`属性，链接目标在 iframe 打开

1. <iframe name="myIframe" style="width:700px;height:400px;border:1px solid #ccc;"></iframe>
   
2. <!-- 点击链接，页面会在iframe里面加载，不是新开窗口 -->
   
3. <a href="https://www.bing.com" target="myIframe">在框架打开必应</a>

复制代码

四、sandbox 安全属性（重点）
sandbox 会禁用 iframe 页面的脚本、表单提交等，提升安全。

1. <!-- 完全限制，禁止脚本、表单、弹窗 -->
   
2. <iframe src="第三方页面" sandbox></iframe>
   
3. <!-- 放开部分权限 -->
   
4. <iframe src="第三方页面" sandbox="allow-scripts allow-forms"></iframe>

复制代码

常用 sandbox 值：

• `allow‑scripts`：允许执行 js 脚本
• `allow‑forms`：允许提交表单
• `allow‑popups`：允许弹窗打开新窗口
• `allow‑fullscreen`：允许全屏
  

五、视频嵌入（B 站 / YouTube 这类都是 iframe）

1. <iframe
   
2.     width="800"
   
3.     height="450"
   
4.     src="视频嵌入地址"
   
5.     allowfullscreen
   
6.     style="border:none;">
   
7. </iframe>

复制代码

风萧

HTML video 视频标签
一、基础最简代码

1. <video src="test.mp4" controls></video>

复制代码

• `src`：视频文件地址（本地文件 / 网络视频 url）
• `controls`：显示播放、暂停、音量控制条，必须加才有按钮
• `auto`：自动大小，可以通过这个设置宽度、高度
  

二、完整常用属性

1. <video controls
   
2.     src="video.mp4"
   
3.     width="600"       <!-- 视频宽度 -->
   
4.     height="340"      <!-- 视频高度，一般只设宽度，高度自动等比缩放 -->
   
5.     controls          <!-- 显示控制面板 -->
   
6.     autoplay          <!-- 自动播放，现代浏览器需要搭配muted静音才会自动播放 -->
   
7.     muted             <!-- 静音 -->
   
8.     loop              <!-- 循环播放 -->
   
9.     poster="cover.jpg"<!-- 视频没播放时显示的封面图片 -->
   
10. >
    
11. 你的浏览器不支持视频播放
    
12. </video>

复制代码

三、`autoplay` 自动播放规则：浏览器禁止有声自动播放，想要自动播放必须带上 `muted`

1. <!-- 静音自动播放 -->
   
2. <video src="test.mp4" controls autoplay muted loop width="600"></video>

复制代码

四、不同浏览器支持视频格式不一样，写多个 source，浏览器自动选能播放的

1. <video controls width="600" poster="cover.jpg">
   
2.   <source src="movie.mp4" type="video/mp4">
   
3.   <source src="movie.webm" type="video/webm">
   
4.   浏览器不支持该视频
   
5. </video>

复制代码

属性	作用
controls	显示播放按钮
autoplay	页面打开自动播放
loop	播放完毕循环重播
muted	静音
poster	video 视频封面（audio 没有）

风萧

HTML audio 音频标签
用来播放音乐、音效，用法和 video 非常像。
一、最简基础写法

1. <audio src="music.mp3" controls></audio>

复制代码

• `src`：音频文件地址（mp3 兼容性最好）
• `controls`：显示播放、暂停、音量的控制面板，不加就看不见播放器
• `style="display:none;"`:这个可以隐藏播放器
  

二、全部常用属性

1. <audio
   
2.     src="music.mp3"
   
3.     controls      <!-- 显示播放器控件 -->
   
4.     autoplay      <!-- 自动播放，浏览器需要 muted 才可以自动播放 -->
   
5.     muted         <!-- 静音 -->
   
6.     loop          <!-- 循环播放 -->
   
7.     preload="auto"<!-- 预加载音频 -->
   
8. >
   
9. 你的浏览器不支持音频播放
   
10. </audio>

复制代码

1. <audio src="music.mp3" controls autoplay muted loop  preload="auto"></audio>

复制代码

三、多音源兼容写法（source）

1. <audio controls>
   
2.   <source src="music.mp3" type="audio/mpeg">
   
3.   <source src="music.ogg" type="audio/ogg">
   
4.   浏览器不支持音频
   
5. </audio>

复制代码

常用音频格式

• mp3：全部浏览器兼容，首选
• ogg：体积小，部分浏览器支持
  

风萧

HTML Img 图片标签
一、基础格式

1. <img src="图片地址" alt="图片描述">

复制代码

• `src`：必填，图片路径 / 网络 URL
• `alt`：图片加载失败时显示的文字，提升兼容性
  

二、完整常用属性

1. <img
   
2.     src="demo.jpg"
   
3.     alt="示例图片"
   
4.     width="400"      <!-- 宽度 -->
   
5.     height="300"     <!-- 高度，一般只写width，图片自动等比缩放 -->
   
6.     title="鼠标悬浮提示文字"
   
7. >

复制代码

三、图片加超链接（点击图片跳转网页）
外面套 `<a>` 标签

1. <a href="https://www.baidu.com">
   
2.     <img src="pic.jpg" alt="图片" width="400">
   
3. </a>

复制代码

四、CSS 样式写法（设置边框、圆角）

1. <img src="pic.jpg" alt="示例图片" style="width:400px;border:1px solid #ccc;border-radius:8px;">

复制代码

风萧

HTML font 标签用法
HTML5 已经废除<font>标签，全部使用 CSS 设置字体，分为行内样式、内部样式、外部样式三种写法。

一、常用字体 CSS 属性

CSS 属性	作用	示例
font‑size	字体大小	20px、1.2rem、120%
color	文字颜色	#ff0000、red、rgb(255,0,0)
font‑family	字体族（字体）	"Microsoft YaHei",sans‑serif
font‑weight	字重（加粗）	bold、normal、400‑900
font‑style	斜体	italic斜体 / normal正常
line‑height	行高	1.5、24px
letter‑spacing	字间距	2px

二、HTML5中定义代替FONT的写法
行内 CSS

1. <span style="font-size:22px;color:#0066ff;font-family:'微软雅黑';">替代font的写法</span>

复制代码

style 样式表（更好）

1. <style>
   
2. .mytext {
   
3.     font‑size:22px;
   
4.     color:red;
   
5.     font‑family:"Microsoft YaHei",sans‑serif;
   
6. }
   
7. </style>
   
8. <p class="mytext">用CSS控制文字样式</p>

复制代码

三、font 系列 CSS 属性汇总（记这个）

1. font‑size: 20px;     /*文字大小*/
   
2. color: #333;         /*文字颜色*/
   
3. font‑family: "微软雅黑"; /*字体*/
   
4. font‑weight:bold;    /*加粗*/
   
5. font‑style:italic;   /*斜体*/

复制代码

风萧

HTML audio 音频标签发布多首歌曲
带列表可以连续播放，也可以选择播放的discuz论坛发帖代码

1. <!--
   
2. Discuz论坛简易音乐播放器 发帖代码
   
3. 使用方法：
   
4. 1. 复制下方全部代码，在Discuz发帖时点击编辑器的「源码/HTML」按钮（通常是<>图标），粘贴到源码编辑框即可
   
5. 2. 添加/修改歌曲：找到下方<ul id="songList">里的<li>标签，复制一行修改data-src里的音频地址和标签内的歌曲名即可
   
6. 3. 音频地址要求：必须是可直接访问的MP3/OGG等格式直链，不支持需要登录、跳转的链接
   
7. 4. 功能：自带浏览器原生播放控件，点击歌曲名切换播放，一首播完自动连播下一首，列表循环
   
8. -->
   
9. 
   
10. <div style="max-width:600px;width:100%;margin:10px auto;background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:15px;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;">
    
11.   <!-- 音频播放器 -->
    
12.   <audio id="dzPlayer" controls style="width:100%;margin-bottom:15px;" preload="metadata"></audio>
    
13.   
    
14.   <!-- 歌曲列表 -->
    
15.   <ul id="songList" style="list-style:none;padding:0;margin:0;max-height:300px;overflow-y:auto;border-radius:6px;border:1px solid #e9ecef;background:#fff;">
    
16.     <!-- 示例歌曲，可自行增删修改 -->
    
17.     <li data-src="https://www.w3school.com.cn/i/horse.mp3" style="padding:10px 15px;border-bottom:1px solid #f1f3f5;cursor:pointer;transition:background 0.2s;">🐎 奔驰的骏马（测试音频）</li>
    
18.     <li data-src="https://www.w3school.com.cn/i/song.mp3" style="padding:10px 15px;border-bottom:1px solid #f1f3f5;cursor:pointer;transition:background 0.2s;">🎵 示例歌曲（测试音频）</li>
    
19.     <!-- 要加歌就复制下面这行，改地址和歌名就行
    
20.     <li data-src="你的歌曲MP3直链地址.mp3" style="padding:10px 15px;border-bottom:1px solid #f1f3f5;cursor:pointer;transition:background 0.2s;">你的歌曲名称</li>
    
21.     -->
    
22.   </ul>
    
23. </div>
    
24. 
    
25. <script type="text/javascript">
    
26. (function(){
    
27.   var player = document.getElementById('dzPlayer');
    
28.   var songList = document.getElementById('songList');
    
29.   var songs = songList.getElementsByTagName('li');
    
30.   var currentIndex = 0;
    
31. 
    
32.   // 初始化样式事件
    
33.   for(var i=0;i<songs.length;i++){
    
34.     // hover效果
    
35.     songs[i].onmouseover = function(){this.style.background = '#f1f3f5';}
    
36.     songs[i].onmouseout = function(){
    
37.       if(!this.classList.contains('active')) this.style.background = '#fff';
    
38.     }
    
39.     // 点击切歌
    
40.     songs[i].index = i;
    
41.     songs[i].onclick = function(){
    
42.       // 清除所有高亮
    
43.       for(var j=0;j<songs.length;j++){
    
44.         songs[j].classList.remove('active');
    
45.         songs[j].style.background = '#fff';
    
46.         songs[j].innerHTML = songs[j].innerHTML.replace('▶ ','');
    
47.       }
    
48.       // 高亮当前播放
    
49.       this.classList.add('active');
    
50.       this.style.background = '#e7f3ff';
    
51.       if(this.innerHTML.indexOf('▶ ') !== 0) this.innerHTML = '▶ ' + this.innerHTML;
    
52.       // 播放歌曲
    
53.       currentIndex = this.index;
    
54.       player.src = this.getAttribute('data-src');
    
55.       player.load();
    
56.       player.play().catch(function(e){console.log('播放需用户手动触发');});
    
57.     }
    
58.   }
    
59. 
    
60.   // 自动连播：一首结束播放下一首
    
61.   player.addEventListener('ended', function(){
    
62.     currentIndex++;
    
63.     if(currentIndex >= songs.length) currentIndex = 0; // 循环播放到第一首
    
64.     songs[currentIndex].click();
    
65.   });
    
66. 
    
67.   // 初始化加载第一首（不自动播放，符合浏览器策略）
    
68.   if(songs.length > 0){
    
69.     songs[0].style.background = '#e7f3ff';
    
70.     songs[0].classList.add('active');
    
71.     songs[0].innerHTML = '▶ ' + songs[0].innerHTML;
    
72.     player.src = songs[0].getAttribute('data-src');
    
73.   }
    
74. })();
    
75. </script>

复制代码

风萧

图片幻灯片
JavaScript 完整版幻灯片（支持自动轮播）

1. <div id="dz_carousel" style="width:600px;height:400px;overflow:hidden;position:relative;margin:10px auto;border:1px solid #ddd;background:#000;">
   
2.   <div id="dz_car_inner" style="width:100%;height:100%;position:relative;">
   
3.     <div class="dz_slide" style="width:100%;height:100%;position:absolute;top:0;left:0;display:none;align-items:center;justify-content:center;">
   
4.       <img src="https://你的图片地址1.jpg" alt="图片1" style="max-width:100%;max-height:100%;" />
   
5.     </div>
   
6.     <div class="dz_slide" style="width:100%;height:100%;position:absolute;top:0;left:0;display:none;align-items:center;justify-content:center;">
   
7.       <img src="https://你的图片地址2.jpg" alt="图片2" style="max-width:100%;max-height:100%;" />
   
8.     </div>
   
9.     <div class="dz_slide" style="width:100%;height:100%;position:absolute;top:0;left:0;display:none;align-items:center;justify-content:center;">
   
10.       <img src="https://你的图片地址3.jpg" alt="图片3" style="max-width:100%;max-height:100%;" />
    
11.     </div>
    
12.     <div class="dz_slide" style="width:100%;height:100%;position:absolute;top:0;left:0;display:none;align-items:center;justify-content:center;">
    
13.       <img src="https://你的图片地址4.jpg" alt="图片4" style="max-width:100%;max-height:100%;" />
    
14.     </div>
    
15.   </div>
    
16.   <button type="button" id="dz_prev" style="position:absolute;top:50%;left:10px;transform:translateY(-50%);width:40px;height:40px;background:rgba(0,0,0,0.5);color:#fff;border:none;border-radius:50%;font-size:22px;cursor:pointer;z-index:10;">‹</button>
    
17.   <button type="button" id="dz_next" style="position:absolute;top:50%;right:10px;transform:translateY(-50%);width:40px;height:40px;background:rgba(0,0,0,0.5);color:#fff;border:none;border-radius:50%;font-size:22px;cursor:pointer;z-index:10;">›</button>
    
18.   <div id="dz_dots" style="position:absolute;bottom:12px;left:0;right:0;text-align:center;z-index:10;"></div>
    
19. </div>
    
20. 
    
21. <script type="text/javascript">
    
22. (function(){
    
23.   var box = document.getElementById('dz_carousel');
    
24.   if(!box) return;
    
25.   var slides = box.getElementsByClassName('dz_slide');
    
26.   var dotsBox = document.getElementById('dz_dots');
    
27.   var prevBtn = document.getElementById('dz_prev');
    
28.   var nextBtn = document.getElementById('dz_next');
    
29.   var curIdx = 0;
    
30.   var timer = null;
    
31.   var total = slides.length;
    
32. 
    
33.   // 生成圆点
    
34.   for(var i=0;i<total;i++){
    
35.     var dot = document.createElement('span');
    
36.     dot.style.cssText = 'display:inline-block;width:10px;height:10px;margin:0 4px;background:rgba(255,255,255,0.6);border-radius:50%;cursor:pointer;';
    
37.     dot.setAttribute('data-idx', i);
    
38.     dotsBox.appendChild(dot);
    
39.   }
    
40.   var dots = dotsBox.getElementsByTagName('span');
    
41. 
    
42.   function show(idx){
    
43.     if(idx<0) idx = total-1;
    
44.     if(idx>=total) idx = 0;
    
45.     curIdx = idx;
    
46.     for(var i=0;i<total;i++){
    
47.       slides[i].style.display = 'none';
    
48.       dots[i].style.background = 'rgba(255,255,255,0.6)';
    
49.     }
    
50.     slides[idx].style.display = 'flex';
    
51.     dots[idx].style.background = '#fff';
    
52.   }
    
53. 
    
54.   function nextSlide(){ show(curIdx+1); }
    
55.   function prevSlide(){ show(curIdx-1); }
    
56.   function startAuto(){ timer = setInterval(nextSlide, 3000); }
    
57.   function stopAuto(){ clearInterval(timer); }
    
58. 
    
59.   prevBtn.onclick = function(){ stopAuto(); prevSlide(); startAuto(); };
    
60.   nextBtn.onclick = function(){ stopAuto(); nextSlide(); startAuto(); };
    
61.   for(var j=0;j<dots.length;j++){
    
62.     dots[j].onclick = (function(k){
    
63.       return function(){ stopAuto(); show(k); startAuto(); };
    
64.     })(j);
    
65.   }
    
66. 
    
67.   box.onmouseenter = stopAuto;
    
68.   box.onmouseleave = startAuto;
    
69. 
    
70.   show(0);
    
71.   startAuto();
    
72. })();
    
73. </script>

复制代码

风萧

Flex 响应式相册图组

1. <div class="dz-album" style="display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;max-width:100%;">
   
2.   <a href="图片1大图地址" target="_blank" style="flex:0 0 calc(33.333% - 6px);max-width:calc(33.333% - 6px);">
   
3.     <img src="图片1缩略图地址" alt="图1" style="width:100%;height:160px;object-fit:cover;border-radius:4px;border:1px solid #ddd;cursor:pointer;transition:.2s;" onmouseover="this.style.transform='scale(1.03)';this.style.boxShadow='0 2px 8px rgba(0,0,0,.15)'" onmouseout="this.style.transform='scale(1)';this.style.boxShadow='none'">
   
4.   </a>
   
5.   <a href="图片2大图地址" target="_blank" style="flex:0 0 calc(33.333% - 6px);max-width:calc(33.333% - 6px);">
   
6.     <img src="图片2缩略图地址" alt="图2" style="width:100%;height:160px;object-fit:cover;border-radius:4px;border:1px solid #ddd;cursor:pointer;transition:.2s;" onmouseover="this.style.transform='scale(1.03)';this.style.boxShadow='0 2px 8px rgba(0,0,0,.15)'" onmouseout="this.style.transform='scale(1)';this.style.boxShadow='none'">
   
7.   </a>
   
8.   <a href="图片3大图地址" target="_blank" style="flex:0 0 calc(33.333% - 6px);max-width:calc(33.333% - 6px);">
   
9.     <img src="图片3缩略图地址" alt="图3" style="width:100%;height:160px;object-fit:cover;border-radius:4px;border:1px solid #ddd;cursor:pointer;transition:.2s;" onmouseover="this.style.transform='scale(1.03)';this.style.boxShadow='0 2px 8px rgba(0,0,0,.15)'" onmouseout="this.style.transform='scale(1)';this.style.boxShadow='none'">
   
10.   </a>
    
11.   <a href="图片4大图地址" target="_blank" style="flex:0 0 calc(33.333% - 6px);max-width:calc(33.333% - 6px);">
    
12.     <img src="图片4缩略图地址" alt="图4" style="width:100%;height:160px;object-fit:cover;border-radius:4px;border:1px solid #ddd;cursor:pointer;transition:.2s;" onmouseover="this.style.transform='scale(1.03)';this.style.boxShadow='0 2px 8px rgba(0,0,0,.15)'" onmouseout="this.style.transform='scale(1)';this.style.boxShadow='none'">
    
13.   </a>
    
14.   <a href="图片5大图地址" target="_blank" style="flex:0 0 calc(33.333% - 6px);max-width:calc(33.333% - 6px);">
    
15.     <img src="图片5缩略图地址" alt="图5" style="width:100%;height:160px;object-fit:cover;border-radius:4px;border:1px solid #ddd;cursor:pointer;transition:.2s;" onmouseover="this.style.transform='scale(1.03)';this.style.boxShadow='0 2px 8px rgba(0,0,0,.15)'" onmouseout="this.style.transform='scale(1)';this.style.boxShadow='none'">
    
16.   </a>
    
17.   <a href="图片6大图地址" target="_blank" style="flex:0 0 calc(33.333% - 6px);max-width:calc(33.333% - 6px);">
    
18.     <img src="图片6缩略图地址" alt="图6" style="width:100%;height:160px;object-fit:cover;border-radius:4px;border:1px solid #ddd;cursor:pointer;transition:.2s;" onmouseover="this.style.transform='scale(1.03)';this.style.boxShadow='0 2px 8px rgba(0,0,0,.15)'" onmouseout="this.style.transform='scale(1)';this.style.boxShadow='none'">
    
19.   </a>
    
20. </div>
    
21. <div style="clear:both;"></div>

复制代码

风萧

Discuz论坛多首歌曲播放器代码

✅ 版本一：兼容版（无JS，全论坛通用，推荐普通用户使用）

1. <div style="max-width:450px;margin:10px auto;background:#fff;padding:15px;border:1px solid #e5e5e5;border-radius:6px;">
   
2. <div id="dz-song-title" style="font-size:1.1em;margin-bottom:8px;color:#4a90e2;font-weight:bold;text-align:center;">我的音乐播放器</div>
   
3. <audio id="dz-audio" controls preload="metadata" style="width:100%;"><source src="https://www.joy127.com/url/158100.mp3" type="audio/mpeg"></audio>
   
4. <div style="margin-top:10px;">
   
5. <p style="margin:5px 0;"><a href="javascript:void(0)" onclick="document.getElementById('dz-audio').src='https://www.joy127.com/url/158100.mp3';document.getElementById('dz-song-title').innerHTML='1. 第一首歌';document.getElementById('dz-audio').play();">▶ 第一首歌</a></p>
   
6. <p style="margin:5px 0;"><a href="javascript:void(0)" onclick="document.getElementById('dz-audio').src='https://www.joy127.com/url/158099.mp3';document.getElementById('dz-song-title').innerHTML='2. 第二首歌';document.getElementById('dz-audio').play();">▶ 第二首歌</a></p>
   
7. <p style="margin:5px 0;"><a href="javascript:void(0)" onclick="document.getElementById('dz-audio').src='https://www.joy127.com/url/158097.mp3';document.getElementById('dz-song-title').innerHTML='3. 第三首歌';document.getElementById('dz-audio').play();">▶ 第三首歌</a></p>
   
8. </div>
   
9. <div style="font-size:0.8em;color:#999;text-align:center;margin-top:8px;">点击歌曲名切换播放，支持手机端</div>
   
10. </div>

复制代码

---

⚡ 版本二：增强版（带自动切歌+上下曲按钮，需论坛支持reload脚本）

1. <div style="max-width:450px;margin:10px auto;background:#fff;padding:15px;border:1px solid #e5e5e5;border-radius:6px;text-align:center;">
   
2. <div id="dz-song-title2" style="font-size:1.1em;margin-bottom:8px;color:#333;">未选择歌曲</div>
   
3. <audio id="dz-audio2" controls preload="metadata" style="width:100%;"></audio>
   
4. <div style="margin-top:15px;">
   
5. <button onclick="loadDzSong(currentIndex-1);playDz();" style="padding:8px 16px;margin:0 5px;background:#4a90e2;color:#fff;border:none;border-radius:4px;cursor:pointer;">⏮ 上一曲</button>
   
6. <button onclick="loadDzSong(currentIndex+1);playDz();" style="padding:8px 16px;margin:0 5px;background:#4a90e2;color:#fff;border:none;border-radius:4px;cursor:pointer;">下一曲 ⏭</button>
   
7. </div>
   
8. </div>
   
9. <script type="text/javascript" reload="1">
   
10. var dzPlaylist = [
    
11.     {name:"第一首歌", src:"https://www.joy127.com/url/158100.mp3"},
    
12.     {name:"第二首歌", src:"https://www.joy127.com/url/158099.mp3"},
    
13.     {name:"第三首歌", src:"https://www.joy127.com/url/158097.mp3"}
    
14. ];
    
15. var currentIndex = 0;
    
16. var audio2 = document.getElementById('dz-audio2');
    
17. var title2 = document.getElementById('dz-song-title2');
    
18. function loadDzSong(index){
    
19.     if(index<0) currentIndex = dzPlaylist.length-1;
    
20.     else if(index>=dzPlaylist.length) currentIndex = 0;
    
21.     else currentIndex = index;
    
22.     var song = dzPlaylist[currentIndex];
    
23.     audio2.src = song.src;
    
24.     title2.innerHTML = (currentIndex+1)+". "+song.name;
    
25.     audio2.load();
    
26. }
    
27. function playDz(){
    
28.     audio2.play().catch(function(e){console.log("播放需要用户交互");});
    
29. }
    
30. audio2.addEventListener('ended', function(){
    
31.     loadDzSong(currentIndex+1);
    
32.     playDz();
    
33. });
    
34. loadDzSong(0);
    
35. </script>

复制代码

风萧

多视频列表播放器代码

1. <style type="text/css">
   
2. .video-playlist-container {
   
3.     max-width: 800px;
   
4.     margin: 15px auto;
   
5.     font-family: "Microsoft YaHei", sans-serif;
   
6.     background: #1a1a1a;
   
7.     border-radius: 10px;
   
8.     overflow: hidden;
   
9.     box-shadow: 0 10px 40px rgba(0,0,0,0.3);
   
10. }
    
11. .video-main {
    
12.     position: relative;
    
13.     background: #000;
    
14. }
    
15. .video-main video {
    
16.     width: 100%;
    
17.     display: block;
    
18.     max-height: 500px;
    
19. }
    
20. .video-info-bar {
    
21.     background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
    
22.     color: #fff;
    
23.     padding: 15px;
    
24.     position: absolute;
    
25.     top: 0;
    
26.     left: 0;
    
27.     right: 0;
    
28.     z-index: 10;
    
29. }
    
30. .video-title {
    
31.     font-size: 16px;
    
32.     font-weight: bold;
    
33.     margin-bottom: 5px;
    
34. }
    
35. .video-index {
    
36.     font-size: 12px;
    
37.     opacity: 0.8;
    
38. }
    
39. .video-controls-bar {
    
40.     display: flex;
    
41.     justify-content: space-between;
    
42.     align-items: center;
    
43.     padding: 10px 15px;
    
44.     background: #222;
    
45.     color: #fff;
    
46. }
    
47. .control-group {
    
48.     display: flex;
    
49.     gap: 10px;
    
50.     align-items: center;
    
51. }
    
52. .ctrl-btn {
    
53.     background: #444;
    
54.     border: none;
    
55.     color: #fff;
    
56.     padding: 6px 12px;
    
57.     border-radius: 4px;
    
58.     cursor: pointer;
    
59.     font-size: 12px;
    
60. }
    
61. .ctrl-btn:hover { background: #666; }
    
62. .ctrl-btn.active { background: #e74c3c; }
    
63. .playlist {
    
64.     max-height: 280px;
    
65.     overflow-y: auto;
    
66.     background: #1a1a1a;
    
67. }
    
68. .playlist-item {
    
69.     display: flex;
    
70.     align-items: center;
    
71.     padding: 12px 15px;
    
72.     border-bottom: 1px solid #333;
    
73.     cursor: pointer;
    
74.     transition: all 0.2s;
    
75.     color: #ccc;
    
76. }
    
77. .playlist-item:hover { background: #2a2a2a; }
    
78. .playlist-item.playing {
    
79.     background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
    
80.     color: #fff;
    
81. }
    
82. .playlist-item.played { opacity: 0.6; }
    
83. .item-index {
    
84.     width: 28px;
    
85.     height: 28px;
    
86.     border-radius: 50%;
    
87.     background: #333;
    
88.     display: flex;
    
89.     align-items: center;
    
90.     justify-content: center;
    
91.     font-size: 12px;
    
92.     margin-right: 12px;
    
93.     flex-shrink: 0;
    
94. }
    
95. .playlist-item.playing .item-index {
    
96.     background: #fff;
    
97.     color: #e74c3c;
    
98. }
    
99. .item-info { flex: 1; }
    
100. .item-title {
     
101.     font-size: 14px;
     
102.     margin-bottom: 3px;
     
103. }
     
104. .item-duration {
     
105.     font-size: 11px;
     
106.     opacity: 0.7;
     
107. }
     
108. .playing-indicator {
     
109.     margin-left: 10px;
     
110.     font-size: 12px;
     
111. }
     
112. .playlist::-webkit-scrollbar { width: 6px; }
     
113. .playlist::-webkit-scrollbar-track { background: #1a1a1a; }
     
114. .playlist::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
     
115. @media (max-width: 600px) {
     
116.     .video-title { font-size: 14px; }
     
117.     .playlist-item { padding: 10px; }
     
118. }
     
119. </style>
     
120. 
     
121. <div class="video-playlist-container">
     
122.     <div class="video-main">
     
123.         <div class="video-info-bar">
     
124.             <div class="video-title" id="videoTitle">视频标题</div>
     
125.             <div class="video-index" id="videoIndex">第 1 集 / 共 N 集</div>
     
126.         </div>
     
127.         <video id="mainVideo" controls preload="metadata" playsinline webkit-playsinline>
     
128.             您的浏览器不支持HTML5视频播放，请升级浏览器。
     
129.         </video>
     
130.     </div>
     
131.     <div class="video-controls-bar">
     
132.         <div class="control-group">
     
133.             <button class="ctrl-btn" onclick="prevVideo()">⏮ 上一集</button>
     
134.             <button class="ctrl-btn" onclick="nextVideo()">下一集 ⏭</button>
     
135.         </div>
     
136.         <div class="control-group">
     
137.             <button class="ctrl-btn active" id="autoPlayBtn" onclick="toggleAutoPlay()">🔁 连播: 开</button>
     
138.             <button class="ctrl-btn" id="loopBtn" onclick="toggleLoop()">🔂 循环: 关</button>
     
139.         </div>
     
140.     </div>
     
141.     <div class="playlist" id="playlist"></div>
     
142. </div>
     
143. 
     
144. <script type="text/javascript">
     
145. // ======== 视频列表配置（替换为你自己的视频地址）========
     
146. var videoList = [
     
147.     {
     
148.         title: "第一集：视频标题写这里",
     
149.         url: "https://www.w3schools.com/html/mov_bbb.mp4",
     
150.         duration: ""
     
151.     },
     
152.     {
     
153.         title: "第二集：视频标题写这里",
     
154.         url: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
     
155.         duration: ""
     
156.     },
     
157.     {
     
158.         title: "第三集：视频标题写这里",
     
159.         url: "https://www.w3schools.com/html/movie.mp4",
     
160.         duration: ""
     
161.     }
     
162.     // 按此格式继续添加更多视频即可
     
163. ];
     
164. // ========================================================
     
165. 
     
166. var currentIndex = 0;
     
167. var autoPlayNext = true;
     
168. var loopAll = false;
     
169. var video = document.getElementById('mainVideo');
     
170. var playlistEl = document.getElementById('playlist');
     
171. 
     
172. function initPlaylist() {
     
173.     playlistEl.innerHTML = '';
     
174.     for (var i = 0; i < videoList.length; i++) {
     
175.         var item = document.createElement('div');
     
176.         item.className = 'playlist-item' + (i === 0 ? ' playing' : '');
     
177.         item.setAttribute('data-index', i);
     
178.         item.innerHTML =
     
179.             '<div class="item-index">' + (i + 1) + '</div>' +
     
180.             '<div class="item-info">' +
     
181.                 '<div class="item-title">' + videoList[i].title + '</div>' +
     
182.                 '<div class="item-duration">' + (videoList[i].duration || '') + '</div>' +
     
183.             '</div>' +
     
184.             '<div class="playing-indicator">' + (i === 0 ? '▶ 播放中' : '') + '</div>';
     
185.         item.onclick = (function(idx) {
     
186.             return function() { playVideo(idx); };
     
187.         })(i);
     
188.         playlistEl.appendChild(item);
     
189.     }
     
190. }
     
191. 
     
192. function playVideo(index) {
     
193.     if (index < 0) index = loopAll ? videoList.length - 1 : 0;
     
194.     if (index >= videoList.length) index = loopAll ? 0 : videoList.length - 1;
     
195.     currentIndex = index;
     
196.     var item = videoList[index];
     
197.     video.src = item.url;
     
198.     video.load();
     
199.     video.play().catch(function(e) {});
     
200.     document.getElementById('videoTitle').textContent = item.title;
     
201.     document.getElementById('videoIndex').textContent = '第 ' + (index + 1) + ' 集 / 共 ' + videoList.length + ' 集';
     
202.     var items = playlistEl.querySelectorAll('.playlist-item');
     
203.     for (var i = 0; i < items.length; i++) {
     
204.         items[i].className = 'playlist-item';
     
205.         var indicator = items[i].querySelector('.playing-indicator');
     
206.         indicator.textContent = '';
     
207.         if (i < index) items[i].className += ' played';
     
208.         if (i === index) {
     
209.             items[i].className += ' playing';
     
210.             indicator.textContent = '▶ 播放中';
     
211.         }
     
212.     }
     
213. }
     
214. 
     
215. function nextVideo() {
     
216.     if (currentIndex < videoList.length - 1) playVideo(currentIndex + 1);
     
217.     else if (loopAll) playVideo(0);
     
218. }
     
219. 
     
220. function prevVideo() {
     
221.     if (currentIndex > 0) playVideo(currentIndex - 1);
     
222.     else if (loopAll) playVideo(videoList.length - 1);
     
223. }
     
224. 
     
225. function toggleAutoPlay() {
     
226.     autoPlayNext = !autoPlayNext;
     
227.     var btn = document.getElementById('autoPlayBtn');
     
228.     btn.textContent = autoPlayNext ? '🔁 连播: 开' : '🔁 连播: 关';
     
229.     btn.className = 'ctrl-btn' + (autoPlayNext ? ' active' : '');
     
230. }
     
231. 
     
232. function toggleLoop() {
     
233.     loopAll = !loopAll;
     
234.     var btn = document.getElementById('loopBtn');
     
235.     btn.textContent = loopAll ? '🔂 循环: 开' : '🔂 循环: 关';
     
236.     btn.className = 'ctrl-btn' + (loopAll ? ' active' : '');
     
237. }
     
238. 
     
239. video.addEventListener('ended', function() {
     
240.     if (autoPlayNext) {
     
241.         if (currentIndex < videoList.length - 1) nextVideo();
     
242.         else if (loopAll) playVideo(0);
     
243.     }
     
244. });
     
245. 
     
246. initPlaylist();
     
247. playVideo(0);
     
248. </script>

复制代码