html5多媒体播放器的加载由浏览器动态决策，核心是source顺序决定格式优先级（mp4优先）、preload控制预加载深度（metadata最常用）、autoplay必须配合muted才能触发加载，js播放队列需监听ended事件并检查readystate。
HTML5 多媒体播放器的加载顺序和资源优先级，直接影响视频能否顺利播放、是否卡顿、以及在不同设备和浏览器上的兼容性。核心不在于“谁先谁后”的机械排序，而在于浏览器如何按需解析、加载、选择并启动媒体资源。
video/audio 标签内 source 的加载优先级
浏览器不会按 HTML 中 <source></source> 出现的顺序“依次尝试”，而是根据自身支持的编码格式，**从上到下查找第一个 type 匹配且能解码的资源**。因此顺序本身就是优先级策略：
- 把兼容性最广的格式（如 MP4/H.264）放在第一个
<source></source>，确保 Chrome、Safari、Edge 和现代 Firefox 都能快速命中 - 第二个放 WebM（VP9），覆盖 Firefox、Chrome、Opera 等对开放格式支持更好的场景
- Ogg/Theora 可作为兜底，仅针对极老 Firefox 版本，实际已较少必要
- 每个
<source></source>必须带type属性（如type="video/mp4"），否则浏览器无法预判是否支持，可能跳过或触发额外探测
preload 属性决定初始加载深度
preload 不控制“谁先加载”，而是告诉浏览器“该为播放做多大准备”：
-
preload="none"：不预加载，点击播放时才开始请求媒体数据（节省流量，适合长视频或低带宽场景） -
preload="metadata"：只加载时长、宽高、封面帧等元信息（最常用平衡点，控件可立即显示进度条） -
preload="auto"：尽可能预加载全部内容（适合短片、背景视频；但可能被浏览器忽略，尤其移动端为省电会降级处理）
注意：即使设为 auto，浏览器仍可能因网络状况、内存压力或用户设置（如“节省数据”模式）主动限制加载量。
autoplay + muted 是自动播放的硬性前提
现代浏览器普遍禁止有声自动播放，但允许静音自动播放。这个规则直接决定“是否启动加载”：
- 仅写
autoplay→ 浏览器拒绝加载音频轨道，视频可能黑屏或卡在第一帧 - 必须同时写
autoplay muted→ 触发媒体资源加载与播放流程 - 若还需循环，加
loop即可；若想静音但允许用户手动取消静音，muted仍需保留，否则 autoplay 失效
JavaScript 控制下的播放队列执行顺序
当用 JS 实现多个音视频顺序播放（如播客、教学视频列表），逻辑顺序由代码驱动，与 HTML 结构无关：
- 监听当前媒体元素的
ended事件，而非依赖 DOM 顺序 - 用数组管理文件路径，通过索引递增切换；或用队列结构动态入队/出队
- 调用
.play()前建议检查readyState === 4（HAVE_ENOUGH_DATA），避免因缓冲不足报错 - 移动端需注意：部分 iOS Safari 要求用户手势触发首次
play()，不能在页面加载后立即调用
本质上，HTML5 多媒体的加载不是线性排队，而是浏览器基于格式支持、用户意图、设备能力与网络环境做的动态决策。写对 <source></source> 顺序、设准 preload、守牢 autoplay muted 规则，再辅以 JS 精细控制，就能让播放体验既可靠又高效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
