Search code examples
videobrowsercross-browserhtml5-video

Browser support for .mov video

I'm trying to display on the web videos (using the HTML5 video tag) emailed directly from an iPhone SE using iOS 12.2. The file extension is .mov, and the codecs used are H.264 and AAC. I'm trying to figure out if I need to convert the videos to another format to achieve cross-browser support for 95% of US browsers.

I looked up support for the Video element on CanIUse , and the sub features tab shows links for more details on the following formats:

I've read that .mov files can use MPEG-4 formats. Is there anything particular about the .mov extension versus the .mp4 extension on the web that affects browser support?

In other words, does the MPEG-4/H.264 table on CanIUse apply to .mov files the same as .mp4 files? Or is there any difference?

Solution

  • According to https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#quicktime, the Quicktime container format (.mov) is not supported by most modern browsers. However, testing it myself, I do see different results:

    Test setup

    Video file: a .mov container with a H264 video (codec avc1.640028) inside (exported from Quicktime on macOS)

    HTML:

    <video width="1280" height="720">
  <source src="lightbulbs-h264.mov" type="video/quicktime">
  No video support.
</video>

    Variables:

    • Multiple browsers on multiple OS'es (covering the WebKit, Blink and Gecko engines)
      • macOS 13.2.1
        • Firefox 113.0.1
        • Safari 16.3
        • Chrome 113.0.5672.126
      • Windows 11 (via VirtualBox)
        • Edge 113.0.1774.50
        • Firefox
        • Chrome
      • Android (OxygenOS 13.1)
        • Chrome
    • Multiple type declarations in the source tag.

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

    Results & conclusion

    Browser video/quicktime video/mp4 video/mp4; codecs="avc1.640028"
    Safari (mac)  ✅ ✅ ✅
    Firefox (mac)  ✅ ✅ ✅
    Chrome (mac)  ❌ ✅ ✅
    Edge (Win)  ❌ ✅ ✅
    Firefox (Win)  ✅ ✅ ✅
    Chrome (Win)  ❌ ✅ ✅
    Chrome (Android)  ❌ ✅ ✅
    Samsung Internet (Android) ❌ ✅ ✅
    UC (Android)  ❌ ✅ ✅
    Opera (Android)  ❌ ✅ ✅
    Edge (Android)  ❌ ✅ ✅
    Firefox (Android)  ✅ ✅ ✅
    Tor Browser (Android)  ✅ ✅ ✅
    Firefox (Linux)  ❌ ✅ ✅

    As you can see, all Blink/Chromium based browsers seem to fail when defining the video source type as video/quicktime.

    In conclusion, from this (albeit limited) research, you should be fine if you can ensure that the video files are encoded as H264 video within a .mov container, assuming you use the type video/mp4 for your source tag.

    PS: I do not have any iOS devices to test on, but I assume that you can test this yourself.