风萧 发表于 2026-8-22 06:25:28

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

HTML iframe 标签用法
一、最简单嵌入网页
<!-- src 填网页地址，width宽 height高 -->
<iframe src="https://www.baidu.com" width="800" height="500" frameborder="0"></iframe>去掉边框，百分比自适应<iframe
    src="./test.html"
    width="100%"
    height="600px"
    frameborder="0">
</iframe>frameborder 已经废弃，更推荐用 CSS：<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 打开
<iframe name="myIframe" style="width:700px;height:400px;border:1px solid #ccc;"></iframe>
<!-- 点击链接，页面会在iframe里面加载，不是新开窗口 -->
<a href="https://www.bing.com" target="myIframe">在框架打开必应</a>
四、sandbox 安全属性（重点）
sandbox 会禁用 iframe 页面的脚本、表单提交等，提升安全。
<!-- 完全限制，禁止脚本、表单、弹窗 -->
<iframe src="第三方页面" sandbox></iframe>
<!-- 放开部分权限 -->
<iframe src="第三方页面" sandbox="allow-scripts allow-forms"></iframe>常用 sandbox 值：

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

五、视频嵌入（B 站 / YouTube 这类都是 iframe）
<iframe
    width="800"
    height="450"
    src="视频嵌入地址"
    allowfullscreen
    style="border:none;">
</iframe>

风萧 发表于 2026-8-22 07:31:15

HTML video 视频标签
一、基础最简代码
<video src="test.mp4" controls></video>

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

二、完整常用属性
<video controls
    src="video.mp4"
    width="600"       <!-- 视频宽度 -->
    height="340"      <!-- 视频高度，一般只设宽度，高度自动等比缩放 -->
    controls          <!-- 显示控制面板 -->
    autoplay          <!-- 自动播放，现代浏览器需要搭配muted静音才会自动播放 -->
    muted             <!-- 静音 -->
    loop            <!-- 循环播放 -->
    poster="cover.jpg"<!-- 视频没播放时显示的封面图片 -->
>
你的浏览器不支持视频播放
</video>
三、`autoplay` 自动播放规则：浏览器禁止有声自动播放，想要自动播放必须带上 `muted`
<!-- 静音自动播放 -->
<video src="test.mp4" controls autoplay muted loop width="600"></video>
四、不同浏览器支持视频格式不一样，写多个 source，浏览器自动选能播放的
<video controls width="600" poster="cover.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
浏览器不支持该视频
</video>

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

风萧 发表于 2026-8-22 07:40:34

HTML audio 音频标签
用来播放音乐、音效，用法和 video 非常像。
一、最简基础写法
<audio src="music.mp3" controls></audio>

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

二、全部常用属性
<audio
    src="music.mp3"
    controls      <!-- 显示播放器控件 -->
    autoplay      <!-- 自动播放，浏览器需要 muted 才可以自动播放 -->
    muted         <!-- 静音 -->
    loop          <!-- 循环播放 -->
    preload="auto"<!-- 预加载音频 -->
>
你的浏览器不支持音频播放
</audio>
<audio src="music.mp3" controls autoplay muted looppreload="auto"></audio>
三、多音源兼容写法（source）
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
浏览器不支持音频
</audio>
常用音频格式

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

风萧 发表于 2026-8-22 07:46:40

HTML Img 图片标签
一、基础格式
<img src="图片地址" alt="图片描述">

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

二、完整常用属性
<img
    src="demo.jpg"
    alt="示例图片"
    width="400"      <!-- 宽度 -->
    height="300"   <!-- 高度，一般只写width，图片自动等比缩放 -->
    title="鼠标悬浮提示文字"
>
三、图片加超链接（点击图片跳转网页）
外面套 `<a>` 标签
<a href="https://www.baidu.com">
    <img src="pic.jpg" alt="图片" width="400">
</a>
四、CSS 样式写法（设置边框、圆角）
<img src="pic.jpg" alt="示例图片" style="width:400px;border:1px solid #ccc;border-radius:8px;">

风萧 发表于 2026-8-22 09:52:29

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
<span style="font-size:22px;color:#0066ff;font-family:'微软雅黑';">替代font的写法</span>
style 样式表（更好）
<style>
.mytext {
    font‑size:22px;
    color:red;
    font‑family:"Microsoft YaHei",sans‑serif;
}
</style>
<p class="mytext">用CSS控制文字样式</p>
三、font 系列 CSS 属性汇总（记这个）
font‑size: 20px;   /*文字大小*/
color: #333;         /*文字颜色*/
font‑family: "微软雅黑"; /*字体*/
font‑weight:bold;    /*加粗*/
font‑style:italic;   /*斜体*/

风萧 发表于 2026-8-25 09:08:13

HTML audio 音频标签发布多首歌曲
带列表可以连续播放，也可以选择播放的discuz论坛发帖代码
<!--
Discuz论坛简易音乐播放器 发帖代码
使用方法：
1. 复制下方全部代码，在Discuz发帖时点击编辑器的「源码/HTML」按钮（通常是<>图标），粘贴到源码编辑框即可
2. 添加/修改歌曲：找到下方<ul id="songList">里的<li>标签，复制一行修改data-src里的音频地址和标签内的歌曲名即可
3. 音频地址要求：必须是可直接访问的MP3/OGG等格式直链，不支持需要登录、跳转的链接
4. 功能：自带浏览器原生播放控件，点击歌曲名切换播放，一首播完自动连播下一首，列表循环
-->

<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;">
<!-- 音频播放器 -->
<audio id="dzPlayer" controls style="width:100%;margin-bottom:15px;" preload="metadata"></audio>

<!-- 歌曲列表 -->
<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;">
    <!-- 示例歌曲，可自行增删修改 -->
    <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>
    <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>
    <!-- 要加歌就复制下面这行，改地址和歌名就行
    <li data-src="你的歌曲MP3直链地址.mp3" style="padding:10px 15px;border-bottom:1px solid #f1f3f5;cursor:pointer;transition:background 0.2s;">你的歌曲名称</li>
    -->
</ul>
</div>

<script type="text/javascript">
(function(){
var player = document.getElementById('dzPlayer');
var songList = document.getElementById('songList');
var songs = songList.getElementsByTagName('li');
var currentIndex = 0;

// 初始化样式事件
for(var i=0;i<songs.length;i++){
    // hover效果
    songs.onmouseover = function(){this.style.background = '#f1f3f5';}
    songs.onmouseout = function(){
      if(!this.classList.contains('active')) this.style.background = '#fff';
    }
    // 点击切歌
    songs.index = i;
    songs.onclick = function(){
      // 清除所有高亮
      for(var j=0;j<songs.length;j++){
      songs.classList.remove('active');
      songs.style.background = '#fff';
      songs.innerHTML = songs.innerHTML.replace('▶ ','');
      }
      // 高亮当前播放
      this.classList.add('active');
      this.style.background = '#e7f3ff';
      if(this.innerHTML.indexOf('▶ ') !== 0) this.innerHTML = '▶ ' + this.innerHTML;
      // 播放歌曲
      currentIndex = this.index;
      player.src = this.getAttribute('data-src');
      player.load();
      player.play().catch(function(e){console.log('播放需用户手动触发');});
    }
}

// 自动连播：一首结束播放下一首
player.addEventListener('ended', function(){
    currentIndex++;
    if(currentIndex >= songs.length) currentIndex = 0; // 循环播放到第一首
    songs.click();
});

// 初始化加载第一首（不自动播放，符合浏览器策略）
if(songs.length > 0){
    songs.style.background = '#e7f3ff';
    songs.classList.add('active');
    songs.innerHTML = '▶ ' + songs.innerHTML;
    player.src = songs.getAttribute('data-src');
}
})();
</script>

风萧 发表于 2026-8-25 13:57:48

图片幻灯片
JavaScript 完整版幻灯片（支持自动轮播）
<div id="dz_carousel" style="width:600px;height:400px;overflow:hidden;position:relative;margin:10px auto;border:1px solid #ddd;background:#000;">
<div id="dz_car_inner" style="width:100%;height:100%;position:relative;">
    <div class="dz_slide" style="width:100%;height:100%;position:absolute;top:0;left:0;display:none;align-items:center;justify-content:center;">
      <img src="https://你的图片地址1.jpg" alt="图片1" style="max-width:100%;max-height:100%;" />
    </div>
    <div class="dz_slide" style="width:100%;height:100%;position:absolute;top:0;left:0;display:none;align-items:center;justify-content:center;">
      <img src="https://你的图片地址2.jpg" alt="图片2" style="max-width:100%;max-height:100%;" />
    </div>
    <div class="dz_slide" style="width:100%;height:100%;position:absolute;top:0;left:0;display:none;align-items:center;justify-content:center;">
      <img src="https://你的图片地址3.jpg" alt="图片3" style="max-width:100%;max-height:100%;" />
    </div>
    <div class="dz_slide" style="width:100%;height:100%;position:absolute;top:0;left:0;display:none;align-items:center;justify-content:center;">
      <img src="https://你的图片地址4.jpg" alt="图片4" style="max-width:100%;max-height:100%;" />
    </div>
</div>
<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>
<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>
<div id="dz_dots" style="position:absolute;bottom:12px;left:0;right:0;text-align:center;z-index:10;"></div>
</div>

<script type="text/javascript">
(function(){
var box = document.getElementById('dz_carousel');
if(!box) return;
var slides = box.getElementsByClassName('dz_slide');
var dotsBox = document.getElementById('dz_dots');
var prevBtn = document.getElementById('dz_prev');
var nextBtn = document.getElementById('dz_next');
var curIdx = 0;
var timer = null;
var total = slides.length;

// 生成圆点
for(var i=0;i<total;i++){
    var dot = document.createElement('span');
    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;';
    dot.setAttribute('data-idx', i);
    dotsBox.appendChild(dot);
}
var dots = dotsBox.getElementsByTagName('span');

function show(idx){
    if(idx<0) idx = total-1;
    if(idx>=total) idx = 0;
    curIdx = idx;
    for(var i=0;i<total;i++){
      slides.style.display = 'none';
      dots.style.background = 'rgba(255,255,255,0.6)';
    }
    slides.style.display = 'flex';
    dots.style.background = '#fff';
}

function nextSlide(){ show(curIdx+1); }
function prevSlide(){ show(curIdx-1); }
function startAuto(){ timer = setInterval(nextSlide, 3000); }
function stopAuto(){ clearInterval(timer); }

prevBtn.onclick = function(){ stopAuto(); prevSlide(); startAuto(); };
nextBtn.onclick = function(){ stopAuto(); nextSlide(); startAuto(); };
for(var j=0;j<dots.length;j++){
    dots.onclick = (function(k){
      return function(){ stopAuto(); show(k); startAuto(); };
    })(j);
}

box.onmouseenter = stopAuto;
box.onmouseleave = startAuto;

show(0);
startAuto();
})();
</script>

风萧 发表于 2026-8-25 14:07:58

Flex 响应式相册图组
<div class="dz-album" style="display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;max-width:100%;">
<a href="图片1大图地址" target="_blank" style="flex:0 0 calc(33.333% - 6px);max-width:calc(33.333% - 6px);">
    <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'">
</a>
<a href="图片2大图地址" target="_blank" style="flex:0 0 calc(33.333% - 6px);max-width:calc(33.333% - 6px);">
    <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'">
</a>
<a href="图片3大图地址" target="_blank" style="flex:0 0 calc(33.333% - 6px);max-width:calc(33.333% - 6px);">
    <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'">
</a>
<a href="图片4大图地址" target="_blank" style="flex:0 0 calc(33.333% - 6px);max-width:calc(33.333% - 6px);">
    <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'">
</a>
<a href="图片5大图地址" target="_blank" style="flex:0 0 calc(33.333% - 6px);max-width:calc(33.333% - 6px);">
    <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'">
</a>
<a href="图片6大图地址" target="_blank" style="flex:0 0 calc(33.333% - 6px);max-width:calc(33.333% - 6px);">
    <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'">
</a>
</div>
<div style="clear:both;"></div>

风萧 发表于 2026-8-25 22:47:27

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

✅ 版本一：兼容版（无JS，全论坛通用，推荐普通用户使用）
<div style="max-width:450px;margin:10px auto;background:#fff;padding:15px;border:1px solid #e5e5e5;border-radius:6px;">
<div id="dz-song-title" style="font-size:1.1em;margin-bottom:8px;color:#4a90e2;font-weight:bold;text-align:center;">我的音乐播放器</div>
<audio id="dz-audio" controls preload="metadata" style="width:100%;"><source src="https://www.joy127.com/url/158100.mp3" type="audio/mpeg"></audio>
<div style="margin-top:10px;">
<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>
<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>
<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>
</div>
<div style="font-size:0.8em;color:#999;text-align:center;margin-top:8px;">点击歌曲名切换播放，支持手机端</div>
</div>

⚡ 版本二：增强版（带自动切歌+上下曲按钮，需论坛支持reload脚本）
<div style="max-width:450px;margin:10px auto;background:#fff;padding:15px;border:1px solid #e5e5e5;border-radius:6px;text-align:center;">
<div id="dz-song-title2" style="font-size:1.1em;margin-bottom:8px;color:#333;">未选择歌曲</div>
<audio id="dz-audio2" controls preload="metadata" style="width:100%;"></audio>
<div style="margin-top:15px;">
<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>
<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>
</div>
</div>
<script type="text/javascript" reload="1">
var dzPlaylist = [
    {name:"第一首歌", src:"https://www.joy127.com/url/158100.mp3"},
    {name:"第二首歌", src:"https://www.joy127.com/url/158099.mp3"},
    {name:"第三首歌", src:"https://www.joy127.com/url/158097.mp3"}
];
var currentIndex = 0;
var audio2 = document.getElementById('dz-audio2');
var title2 = document.getElementById('dz-song-title2');
function loadDzSong(index){
    if(index<0) currentIndex = dzPlaylist.length-1;
    else if(index>=dzPlaylist.length) currentIndex = 0;
    else currentIndex = index;
    var song = dzPlaylist;
    audio2.src = song.src;
    title2.innerHTML = (currentIndex+1)+". "+song.name;
    audio2.load();
}
function playDz(){
    audio2.play().catch(function(e){console.log("播放需要用户交互");});
}
audio2.addEventListener('ended', function(){
    loadDzSong(currentIndex+1);
    playDz();
});
loadDzSong(0);
</script>

风萧 发表于 2026-8-26 00:13:47

多视频列表播放器代码
<style type="text/css">
.video-playlist-container {
    max-width: 800px;
    margin: 15px auto;
    font-family: "Microsoft YaHei", sans-serif;
    background: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.video-main {
    position: relative;
    background: #000;
}
.video-main video {
    width: 100%;
    display: block;
    max-height: 500px;
}
.video-info-bar {
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
    color: #fff;
    padding: 15px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}
.video-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}
.video-index {
    font-size: 12px;
    opacity: 0.8;
}
.video-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #222;
    color: #fff;
}
.control-group {
    display: flex;
    gap: 10px;
    align-items: center;
}
.ctrl-btn {
    background: #444;
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.ctrl-btn:hover { background: #666; }
.ctrl-btn.active { background: #e74c3c; }
.playlist {
    max-height: 280px;
    overflow-y: auto;
    background: #1a1a1a;
}
.playlist-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: all 0.2s;
    color: #ccc;
}
.playlist-item:hover { background: #2a2a2a; }
.playlist-item.playing {
    background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
    color: #fff;
}
.playlist-item.played { opacity: 0.6; }
.item-index {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-right: 12px;
    flex-shrink: 0;
}
.playlist-item.playing .item-index {
    background: #fff;
    color: #e74c3c;
}
.item-info { flex: 1; }
.item-title {
    font-size: 14px;
    margin-bottom: 3px;
}
.item-duration {
    font-size: 11px;
    opacity: 0.7;
}
.playing-indicator {
    margin-left: 10px;
    font-size: 12px;
}
.playlist::-webkit-scrollbar { width: 6px; }
.playlist::-webkit-scrollbar-track { background: #1a1a1a; }
.playlist::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
@media (max-width: 600px) {
    .video-title { font-size: 14px; }
    .playlist-item { padding: 10px; }
}
</style>

<div class="video-playlist-container">
    <div class="video-main">
      <div class="video-info-bar">
            <div class="video-title" id="videoTitle">视频标题</div>
            <div class="video-index" id="videoIndex">第 1 集 / 共 N 集</div>
      </div>
      <video id="mainVideo" controls preload="metadata" playsinline webkit-playsinline>
            您的浏览器不支持HTML5视频播放，请升级浏览器。
      </video>
    </div>
    <div class="video-controls-bar">
      <div class="control-group">
            <button class="ctrl-btn" onclick="prevVideo()">⏮ 上一集</button>
            <button class="ctrl-btn" onclick="nextVideo()">下一集 ⏭</button>
      </div>
      <div class="control-group">
            <button class="ctrl-btn active" id="autoPlayBtn" onclick="toggleAutoPlay()">🔁 连播: 开</button>
            <button class="ctrl-btn" id="loopBtn" onclick="toggleLoop()">🔂 循环: 关</button>
      </div>
    </div>
    <div class="playlist" id="playlist"></div>
</div>

<script type="text/javascript">
// ======== 视频列表配置（替换为你自己的视频地址）========
var videoList = [
    {
      title: "第一集：视频标题写这里",
      url: "https://www.w3schools.com/html/mov_bbb.mp4",
      duration: ""
    },
    {
      title: "第二集：视频标题写这里",
      url: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
      duration: ""
    },
    {
      title: "第三集：视频标题写这里",
      url: "https://www.w3schools.com/html/movie.mp4",
      duration: ""
    }
    // 按此格式继续添加更多视频即可
];
// ========================================================

var currentIndex = 0;
var autoPlayNext = true;
var loopAll = false;
var video = document.getElementById('mainVideo');
var playlistEl = document.getElementById('playlist');

function initPlaylist() {
    playlistEl.innerHTML = '';
    for (var i = 0; i < videoList.length; i++) {
      var item = document.createElement('div');
      item.className = 'playlist-item' + (i === 0 ? ' playing' : '');
      item.setAttribute('data-index', i);
      item.innerHTML =
            '<div class="item-index">' + (i + 1) + '</div>' +
            '<div class="item-info">' +
                '<div class="item-title">' + videoList.title + '</div>' +
                '<div class="item-duration">' + (videoList.duration || '') + '</div>' +
            '</div>' +
            '<div class="playing-indicator">' + (i === 0 ? '▶ 播放中' : '') + '</div>';
      item.onclick = (function(idx) {
            return function() { playVideo(idx); };
      })(i);
      playlistEl.appendChild(item);
    }
}

function playVideo(index) {
    if (index < 0) index = loopAll ? videoList.length - 1 : 0;
    if (index >= videoList.length) index = loopAll ? 0 : videoList.length - 1;
    currentIndex = index;
    var item = videoList;
    video.src = item.url;
    video.load();
    video.play().catch(function(e) {});
    document.getElementById('videoTitle').textContent = item.title;
    document.getElementById('videoIndex').textContent = '第 ' + (index + 1) + ' 集 / 共 ' + videoList.length + ' 集';
    var items = playlistEl.querySelectorAll('.playlist-item');
    for (var i = 0; i < items.length; i++) {
      items.className = 'playlist-item';
      var indicator = items.querySelector('.playing-indicator');
      indicator.textContent = '';
      if (i < index) items.className += ' played';
      if (i === index) {
            items.className += ' playing';
            indicator.textContent = '▶ 播放中';
      }
    }
}

function nextVideo() {
    if (currentIndex < videoList.length - 1) playVideo(currentIndex + 1);
    else if (loopAll) playVideo(0);
}

function prevVideo() {
    if (currentIndex > 0) playVideo(currentIndex - 1);
    else if (loopAll) playVideo(videoList.length - 1);
}

function toggleAutoPlay() {
    autoPlayNext = !autoPlayNext;
    var btn = document.getElementById('autoPlayBtn');
    btn.textContent = autoPlayNext ? '🔁 连播: 开' : '🔁 连播: 关';
    btn.className = 'ctrl-btn' + (autoPlayNext ? ' active' : '');
}

function toggleLoop() {
    loopAll = !loopAll;
    var btn = document.getElementById('loopBtn');
    btn.textContent = loopAll ? '🔂 循环: 开' : '🔂 循环: 关';
    btn.className = 'ctrl-btn' + (loopAll ? ' active' : '');
}

video.addEventListener('ended', function() {
    if (autoPlayNext) {
      if (currentIndex < videoList.length - 1) nextVideo();
      else if (loopAll) playVideo(0);
    }
});

initPlaylist();
playVideo(0);
</script>
页: [1] 2
查看完整版本: 论坛发帖可以使用的HTML代码