在index.html中集成视频播放列表：HTML5 Video标签高级应用-html教程-PHP中文网

video标签不支持playlist属性，该属性不存在于html5规范中；播放列表必须通过javascript监听ended事件、动态更新src或source元素、调用load()和play()实现，并注意自动播放策略限制。

在index.html中集成视频播放列表：html5 video标签高级应用

video 标签本身不支持 playlist 属性

直接在 <video></video> 上写 playlist 属性（如 <video playlist></video>）是无效的，HTML5 规范中根本不存在这个属性。浏览器会忽略它，也不会自动切换视频。网上某些教程提到的 playlist 是虚构或混淆了其他框架（如 Video.js 插件）的行为。

用 JavaScript 手动实现播放列表逻辑

真正的播放列表必须靠 JS 控制：监听 ended 事件、更新 src 或 <source></source>、再调用 load() 和 play()。关键点包括：

每次切换前要清空旧的 ended 监听器，避免重复绑定
新视频加载后必须等待 canplay 或 loadeddata 事件再调用 play()，否则大概率触发 NotAllowedError
若视频带声音，自动播放仍需 muted —— 即使是列表中的后续项

示例核心逻辑：

let videos = ['1.mp4', '2.mp4', '3.mp4'];
let currentIndex = 0;
const videoEl = document.querySelector('video');

function playNext() {
  if (currentIndex >= videos.length) return;
  videoEl.src = videos[currentIndex];
  videoEl.load(); // 必须显式调用
  videoEl.addEventListener('canplay', () => videoEl.play(), { once: true });
  currentIndex++;
}
videoEl.addEventListener('ended', playNext);

多格式视频列表要动态替换而非只改 src

如果每个视频都提供 MP4 + WebM 双源，不能只设 video.src，否则 <source></source> 不会更新，浏览器可能因 MIME 类型不匹配而静默失败。正确做法是：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

清空 videoEl.innerHTML 或遍历移除原有 <source></source> 元素
用 document.createElement('source') 为当前视频重建全部 <source></source>，并设置 type
再 append 到 videoEl，最后 load()
否则 Safari 和部分 Android WebView 会卡在 loading 状态

自动播放策略下，列表第二项起极容易失败

Chrome/Firefox/Safari 对非用户手势触发的 play() 限制非常严格。即使第一项靠 autoplay muted 成功了，第二项由 ended 触发的 play() 仍会被拒绝 —— 因为它不属于“用户激活上下文”延续。

可靠解法：在页面上放一个“继续播放”按钮，点击后才启动列表；或用 videoEl.play().catch(e => console.warn('auto-play blocked:', e)) 容错
不要依赖 setTimeout 延迟调用，这不解决权限问题
移动端尤其敏感，iOS Safari 几乎完全禁止无交互自动播放

真正稳定的播放列表，核心不在标签怎么写，而在是否理解浏览器对媒体自动播放的权限链——它不是一次授权，而是每一段都得重新过审。