wordpress文章内视频剧集html5视频播放代码，不改程序源码

以下是可直接插入WordPress文章的不修改源码的HTML5多剧集播放方案，使用原生video标签实现。

<div style="background:#f5f5f5;padding:15px;margin:20px 0;border-radius:8px">
  <video id="mainPlayer" width="100%" height="400" controls style="background:#000;border-radius:4px">
    <source src="https://imopu.cn/ep1.mp4" type="video/mp4">
    浏览器不支持HTML5视频
  </video>
  
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:15px">
    <div onclick="this.parentNode.querySelectorAll('div').forEach(d=>d.style.background='#ffcc33');this.style.background='#0073aa';document.getElementById('mainPlayer').src='https://imopu.cn/ep1.mp4';document.getElementById('mainPlayer').play()" style="background:#0073aa;color:white;padding:8px;border-radius:4px;cursor:pointer;text-align:center;transition:0.3s">第1集</div>
    <div onclick="this.parentNode.querySelectorAll('div').forEach(d=>d.style.background='#ffcc33');this.style.background='#0073aa';document.getElementById('mainPlayer').src='https://imopu.cn/ep2.mp4';document.getElementById('mainPlayer').play()" style="background:#fff;padding:8px;border-radius:4px;cursor:pointer;text-align:center;transition:0.3s">第2集</div>
    <!-- 复制上方div添加更多剧集 -->
  </div>
</div>

使用说明：

1. 在WordPress文章编辑器切换至”文本”模式粘贴代码
2. 替换示例视频地址(https://imopu.cn/ep1.mp4)为实际MP4/WebM视频URL
3. 复制div元素添加更多剧集按钮，保持onclick事件中的视频路径对应

功能特点：
• 纯前端实现，不依赖插件或主题修改
• 响应式网格布局适配移动端
• 点击剧集自动切换播放并高亮当前选中
• 原生视频控件支持全屏/画中画等功能

增强建议：
• 添加封面图：在video标签内增加poster=”封面图URL”属性
• 支持m3u8格式：需改用video.js等第三方播放器库
• 记忆播放进度：添加localStorage存储功能

效果图如下：