HTML中source标签的多格式备用写法-html教程-PHP中文网

ios safari强制首个必须为h.264 mp4，否则静音、禁自动播放或抛notallowederror；因其webkit内核不fallback，仅检查首个是否可解码，若不满足h.264 baseline+ aac-lc编码且type精确匹配，后续源均被跳过。

html中source标签的多格式备用写法

iOS Safari 会静音、禁自动播放，甚至抛 NotAllowedError —— 如果第一个 <source></source> 不是 H.264 MP4。

为什么必须把 MP4 放在第一个 `<source></source>`

WebKit 内核（包括 iOS Safari 和所有 WebView）不 fallback：它只检查第一个 <source></source> 是否能解码。若不是 H.264 Baseline + AAC-LC 编码的 MP4，后续所有 <source></source> 都不会被请求，<video></video> 直接卡住或静音。

错误写法：<source src="vid.webm" type="video/webm"></source> 排首位 → Safari 真机白屏，Network 面板只看到一个 200，控制台无报错
正确顺序：<source src="vid-h264.mp4" type="video/mp4; codecs=" avc1.42e01e mp4a.40.2></source> 必须第一
导出时用 FFmpeg 加参数：-profile:v baseline -level 3.0 -c:a aac -b:a 128k，避免 High/Main Profile 导致静默失败

`type` 属性必须带精确 `codecs` 参数

只写 type="video/mp4" 等于没写：浏览器无法预判编码兼容性，会发一次请求再解码失败，浪费带宽且首帧延迟。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

H.264 + AAC-LC：type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""（注意空格、逗号、引号位置）
VP9 + Opus：type="video/webm; codecs="vp9, opus""（Safari 16.4+ 才支持，旧版忽略）
AV1 MP4：type="video/mp4; codecs="av01.0.05M.08""（Chrome/Firefox 支持，Safari 16+ 识别，必须放最后）
别写 type="video/mpeg" 或 type="audio/mp3" —— 这些不是合法 MIME 类型

服务端 `Content-Type` 响应头必须逐字符匹配 `type`

浏览器比对的是 type 属性值和服务器返回的 Content-Type 响应头，差一个空格或大小写就跳过该源。

用 curl -I https://example.com/vid.mp4 检查响应头是否为 Content-Type: video/mp4
.webm 文件返回 text/plain？Safari 直接静默跳过
本地开发用 file:// 协议时，type 匹配逻辑完全失效 —— 必须走 http:// 或 https://
别信文件后缀：ffprobe vid.mp4 看实际 codec_name 和 profile，若输出 av1 就不能配 avc1.xxx

结构与加载逻辑最容易被忽略的细节

浏览器不是“选最优”，而是“按顺序找第一个能解码成功的”——type 匹配 + HTTP 200 + 实际帧可解码，三者缺一不可。

<video></video> 自身不能带 src 属性，否则所有 <source></source> 被忽略
<source></source> 必须是 <video></video> 的**直接子元素**，嵌套在其他标签里会触发 DOMException: The element has no supported sources
所有 <source></source> 后、前，必须有一段降级文字，如 Your browser does not support the video tag.
路径错误（404、大小写不符、跨域）不会报错，只会静默跳过；逐个在新标签页打开 src 链接验证可访问性