Mik*_*Eng 5 browser video cross-browser html5-video
我正在尝试在使用 iOS 12.2 的 iPhone SE 直接通过电子邮件发送的网络视频(使用 HTML5 视频标签)上显示。文件扩展名为 .mov,使用的编解码器为 H.264 和 AAC。我想弄清楚是否需要将视频转换为另一种格式,以实现对 95% 的美国浏览器的跨浏览器支持。
我在 CanIUse 上查找了对Video 元素的支持,该sub features选项卡显示了有关以下格式的更多详细信息的链接:
我读过.mov 文件可以使用 MPEG-4 格式。网络上的 .mov 扩展名与 .mp4 扩展名是否有什么特别之处会影响浏览器支持?
换句话说,CanIUse上的MPEG-4/H.264 表是否与 .mp4 文件一样适用于 .mov 文件?或者有什么区别?
Ger*_*ier 11
根据https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#quicktime.mov ,大多数现代浏览器不支持Quicktime 容器格式 ( )。然而,我自己测试了一下,确实看到了不同的结果:
视频文件:内部包含 H264 视频(编解码器 avc1.640028)的 .mov 容器(从 macOS 上的 Quicktime 导出)
\nHTML:
\n<video width="1280" height="720">\n <source src="lightbulbs-h264.mov" type="video/quicktime">\n No video support.\n</video>\nRun Code Online (Sandbox Code Playgroud)\n变量:
\ntype声明source。实例: https://codesandbox.io/s/happy-platform-nwsg4u? file=/index.html
\n| 浏览器 | video/quicktime | video/mp4 | video/mp4; codecs="avc1.640028" |
|---|---|---|---|
| Safari(苹果机) | \xc2\xa0\xe2\x9c\x85 | \xe2\x9c\x85 | \xe2\x9c\x85 |
| 火狐(苹果机) | \xc2\xa0\xe2\x9c\x85 | \xe2\x9c\x85 | \xe2\x9c\x85 |
| 铬(苹果机) | \xc2\xa0\xe2\x9d\x8c | \xe2\x9c\x85 | \xe2\x9c\x85 |
| 边缘(获胜) | \xc2\xa0\xe2\x9d\x8c | \xe2\x9c\x85 | \xe2\x9c\x85 |
| 火狐浏览器(Win) | \xc2\xa0\xe2\x9c\x85 | \xe2\x9c\x85 | \xe2\x9c\x85 |
| 铬(赢) | \xc2\xa0\xe2\x9d\x8c | \xe2\x9c\x85 | \xe2\x9c\x85 |
| 铬(安卓) | \xc2\xa0\xe2\x9d\x8c | \xe2\x9c\x85 | \xe2\x9c\x85 |
| 三星互联网(安卓) | \xe2\x9d\x8c | \xe2\x9c\x85 | \xe2\x9c\x85 |
| 统一通讯(安卓) | \xc2\xa0\xe2\x9d\x8c | \xe2\x9c\x85 | \xe2\x9c\x85 |
| 歌剧(安卓) | \xc2\xa0\xe2\x9d\x8c | \xe2\x9c\x85 | \xe2\x9c\x85 |
| 边缘(安卓) | \xc2\xa0\xe2\x9d\x8c | \xe2\x9c\x85 | \xe2\x9c\x85 |
| 火狐(安卓) | \xc2\xa0\xe2\x9c\x85 | \xe2\x9c\x85 | \xe2\x9c\x85 |
| Tor 浏览器(安卓) | \xc2\xa0\xe2\x9c\x85 | \xe2\x9c\x85 | \xe2\x9c\x85 |
| 火狐浏览器(Linux) | \xc2\xa0\xe2\x9d\x8c | \xe2\x9c\x85 | \xe2\x9c\x85 |
正如您所看到的,所有基于 Blink/Chromium 的浏览器在将视频源类型定义为video/quicktime.
总之,从这项(尽管有限)研究来看,如果您可以确保视频文件在 .mov 容器中编码为 H264 视频(假设您使用标签类型),那么您应该没video/mp4问题source。
PS:我没有任何iOS设备可供测试,但我假设你可以自己测试一下。
\n