HTML的source标签type指定视频格式怎么用-html教程-PHP中文网

type属性必须带codecs参数才真正起作用，仅写type="video/mp4"等同于没写，浏览器无法判断内部编码是否支持，会发起请求后才发现解码失败；真正起作用的是type="video/mp4; codecs="avc1.42e01e, mp4a.40.2""等完整声明，使浏览器在请求前完成mime类型与编解码器双层校验。

html的source标签type指定视频格式怎么用

type属性必须带codecs参数才真正起作用

只写 type="video/mp4" 等同于没写——浏览器无法据此判断内部编码是否支持，会照常发起请求，等下载完才发现解码失败。Network 面板里能看到 200，但视频黑屏、无报错、error 事件也不触发（静默跳过）。

真正起作用的是带 codecs 的完整声明，例如：

<source src="vid.mp4" type="video/mp4; codecs=" avc1.42e01e mp4a.40.2></source>

它让浏览器在发起网络请求前就完成“MIME 类型 + 编解码器”双层校验。不匹配的 <source></source> 直接被跳过，连请求都不会发。

avc1.42E01E 表示 H.264 Baseline Profile（iOS Safari 唯一认的起点）
mp4a.40.2 表示 AAC-LC 音频（不是 aac 或 mp4a）
大小写敏感：vp9 可行，VP9 或 vp09 都不行
用 ffprobe -v quiet -show_entries stream=codec_name,profile -of csv video.mp4 核实实际编码参数

iOS Safari 对第一个 source 有硬性三条件

把 <source src="vid.webm" type="video/webm"></source> 放第一位？真机上大概率白屏、静音、自动播放被禁，甚至抛 NotAllowedError。WebKit 不 fallback，它直接判定整个 <video></video> 不可用，后续所有 <source></source> 都不会加载。

必须同时满足：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

位置第一：<source></source> 必须是 <video></video> 内的第一个子元素
编码合规：H.264 Baseline 或 Main Profile（推荐 -profile:v baseline -level 3.0），AAC-LC 音频（-c:a aac -b:a 128k）
type 逐字符一致：服务器返回的 Content-Type 响应头必须和 type 属性值完全相同，包括空格、逗号、引号位置。例如你写 type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""，但服务端返回 video/mp4; codecs="avc1.42E01E,mp4a.40.2"（少空格），Safari 就当它不匹配

多个 source 的选择顺序和 fallback 逻辑

浏览器不是按“谁文件小/谁画质高”选，而是从上到下检查每个 <source></source>：先看 type 是否被支持，再验证实际编解码器能否解码。首个两者都满足的即被选用。

常见错误现象：视频黑屏，DevTools 的 Network 面板里对应 <source></source> 请求根本没发出——说明浏览器压根没尝试加载它。

type 必须是标准 MIME 类型："video/mp4"、"video/webm"、"video/ogg"，不能写成 "mp4" 或 "video.mp4"
移动端 Safari 对 video/webm 完全不识别，写了也白写；Android Chrome 则基本都支持 mp4 和 webm
推荐顺序：webm (VP9/AV1) → mp4 (H.264) → ogg (Theora)，兼顾现代兼容与降级能力
不要依赖 media 属性做格式分流（如 media="(min-width: 768px)"），它只控制是否下载，不改变解码行为

动态替换 source 后必须显式调用 load()

DOM 上改了 <source></source>，浏览器不会自动重载视频流——哪怕你清空 <video></video> 子节点再 append 新的 <source></source>，也得显式触发 load()，否则旧缓冲、旧状态全保留。

容易踩的坑：

只改 src 属性（绕过 <source></source>），看似省事，但会丢失多格式 fallback 能力
只换 <source></source> 不 load()，界面卡在上一个视频最后一帧，控制条时间也不更新
安全做法：先 video.pause()，再替换 <source></source>，然后 video.load()，最后视需 video.play()
load() 是异步的，后续操作（如监听 loadedmetadata）要绑定在事件上，不能紧跟着写