.mov 视频的浏览器支持

Mik*_*Eng 5 browser video cross-browser html5-video

我正在尝试在使用 iOS 12.2 的 iPhone SE 直接通过电子邮件发送的网络视频(使用 HTML5 视频标签)上显示。文件扩展名为 .mov,使用的编解码器为 H.264 和 AAC。我想弄清楚是否需要将视频转换为另一种格式,以实现对 95% 的美国浏览器的跨浏览器支持。

在 CanIUse 上查找了对Video 元素的支持,该sub features选项卡显示了有关以下格式的更多详细信息的链接:

  • 网络管理器
  • MPEG-4/H.264
  • 奥格/西奥拉
  • 网络VTT
  • HEVC/H.265

我读过.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 容器格式 ( )。然而,我自己测试了一下,确实看到了不同的结果:

\n

测试设置

\n

视频文件:内部包含 H264 视频(编解码器 avc1.640028)的 .mov 容器(从 macOS 上的 Quicktime 导出)

\n

HTML:

\n
<video width="1280" height="720">\n  <source src="lightbulbs-h264.mov" type="video/quicktime">\n  No video support.\n</video>\n
Run Code Online (Sandbox Code Playgroud)\n

变量:

\n
    \n
  • 多个操作系统上的多个浏览器(涵盖 WebKit、Blink 和 Gecko 引擎)\n
      \n
    • macOS 13.2.1\n
        \n
      • 火狐浏览器113.0.1
      • \n
      • Safari 16.3
      • \n
      • 铬113.0.5672.126
      • \n
      \n
    • \n
    • Windows 11(通过 VirtualBox)\n
        \n
      • 边缘113.0.1774.50
      • \n
      • 火狐浏览器
      • \n
      • 铬合金
      • \n
      \n
    • \n
    • Android (OxygenOS 13.1)\n
        \n
      • 铬合金
      • \n
      \n
    • \n
    \n
  • \n
  • 标签中的多个type声明source
  • \n
\n

实例: https://codesandbox.io/s/happy-platform-nwsg4u? file=/index.html

\n

结果与结论

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
浏览器video/quicktimevideo/mp4video/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
\n
\n

正如您所看到的,所有基于 Blink/Chromium 的浏览器在将视频源类型定义为video/quicktime.

\n

总之,从这项(尽管有限)研究来看,如果您可以确保视频文件在 .mov 容器中编码为 H264 视频(假设您使用标签类型),那么您应该没video/mp4问题source

\n

PS:我没有任何iOS设备可供测试,但我假设你可以自己测试一下。

\n