video标签不支持playlist属性，该属性不存在于HTML5规范中；播放列表必须通过JavaScript监听ended事件、动态更新src或source元素、调用load()和play()实现，并注意自动播放策略限制。
video 标签本身不支持 playlist 属性
直接在 <video> 上写 playlist 属性（如 <video playlist>）是无效的，HTML5 规范中根本不存在这个属性。浏览器会忽略它，也不会自动切换视频。网上某些教程提到的 playlist 是虚构或混淆了其他框架（如 Video.js 插件）的行为。
用 JavaScript 手动实现播放列表逻辑
真正的播放列表必须靠 JS 控制：监听 ended 事件、更新 src 或 <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);
多格式视频列表要动态替换 <source> 而非只改 src
如果每个视频都提供 MP4 + WebM 双源，不能只设 video.src，否则 <source> 不会更新，浏览器可能因 MIME 类型不匹配而静默失败。正确做法是：
- 清空
videoEl.innerHTML或遍历移除原有<source>元素 - 用
document.createElement('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 几乎完全禁止无交互自动播放
真正稳定的播放列表，核心不在标签怎么写，而在是否理解浏览器对媒体自动播放的权限链——它不是一次授权，而是每一段都得重新过审。
