html5播放列表靠原生标签+js模拟实现，核心是video/audio元素配合数组和currentindex变量，通过ended事件触发handlenext函数切换资源，并手动维护playmode状态以支持不同播放模式。
HTML5 媒体播放列表实现连续自动播放，不依赖第三方库也能完成，核心靠原生标签 + JavaScript 主动控制。浏览器本身只支持单个媒体源的播放，所谓“播放列表”完全是前端逻辑模拟出来的行为。
基础结构：video/audio 标签 + 播放数组
用一个 <video></video> 或 <audio></audio> 元素作为播放容器，所有待播资源以数组形式预先定义，例如：
const playlist = ["a.mp4", "b.mp4", "c.mp4"];- 配合一个索引变量
let currentIndex = 0;记录当前播放项 - 每次切换都通过
video.src = playlist[currentIndex]更新源，再调用load()和play()
关键事件：ended 触发自动流转
当当前媒体自然结束时，ended 事件是实现“自动播下一首”的唯一可靠入口：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须显式绑定：
video.addEventListener('ended', handleNext) -
handleNext()函数根据当前播放模式决定索引更新方式：顺序加一、循环取模、随机重选、或单曲重播 - 注意：不能仅靠
loop属性——它只对单个文件有效，无法跨文件生效
播放模式状态需手动维护
HTML5 没有内置“循环全部”“随机播放”等概念，所有模式都是 JS 变量驱动的分支逻辑：
- 定义如
let playMode = 'list'（可选值：'list' / 'loop-all' / 'loop-one' / 'random'） - UI 控件（如循环图标）点击时只更新该变量，真正起作用的是
ended或手动切歌时的判断分支 - 例如随机模式下，
handleNext()中执行currentIndex = Math.floor(Math.random() * playlist.length)
进阶需求：无缝与分段控制
若要求多视频/音频片段之间无黑屏、无卡顿，普通 src 切换无法满足：
- 需转向 MediaSource Extensions (MSE)，用
MediaSource+SourceBuffer手动拼接 fMP4 片段 - 每段必须为 fragmented MP4 格式，时间戳需显式对齐（
timestampOffset） - 动态更新
mediaSource.duration，否则进度条和 seek 会异常 - 适合教学视频分段加载、广告插播、直播切片等高一致性场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
