Sign in Subscribe
Video Engineering Featured

Make your videos watchable across browsers

Brian Correa

• 5 min read
Make your videos watchable across browsers
Photo by Denny Müller / Unsplash

In order to make your videos watchable across browsers, you're going to need a few versions of your video to make sure it's supported across different browsers.

With HTML5, we can use the <video> element to list multiple video sources and a browser will play the first one it supports. HTML5 is great in that it provides a standard way of playing media and is supported by most modern browsers.

Play videos for every browser

The following code shows an example of a <video> element that includes multiple video sources as well as fallback text when the browser does not support HTML5 video.

<video>
    <source src="video1.mp4" />
    <source src="video1.ogv" />
    <source src="video1.webm" />
    <p>This browser does not support HTML5 video</p>
</video>

To learn more about working with media in HTML5, check out Microsoft's helpful article on it.

Create multiple versions of your video

Make your videos watchable across browsers

Back to our task at hand, we need to convert a video into different formats. This is easy to do with FFmpeg, an open source tool for encoding multimedia files into various formats. To follow along, make sure you have FFmpeg installed on your computer. You can follow installation instructions here.

HTML5 video supports MP4, WebM, and Ogg file formats. For best browser coverage, were going to encode a video into each of these formats. To see which formats are supported by browser, check out Microsoft's documentation here.

Create MP4 video

Make one version of your video file that uses that uses the H.264 video codec and AAC audio codec in an MP4 format. Most modern web browsers support the MP4 video format. Here is a list of browsers and their support for MP4:

  • Google Chrome: Supports MP4 with the H.264 video codec and AAC or MP3 audio codec.
  • Mozilla Firefox: Supports MP4 with the H.264 video codec and AAC audio codec. Firefox also supports MP4 with the VP9 video codec and Opus audio codec.
  • Microsoft Edge: Supports MP4 with the H.264 video codec and AAC audio codec. Edge also supports MP4 with the VP9 video codec and Opus audio codec.
  • Safari: Supports MP4 with the H.264 video codec and AAC audio codec.
  • Opera: Supports MP4 with the H.264 video codec and AAC or MP3 audio codec. Opera also supports MP4 with the VP9 video codec and Opus audio codec.

It's a good practice to encode your MP4 videos using widely supported codecs like H.264 for video and AAC for audio to ensure maximum compatibility across browsers.

ffmpeg -i input_file -c:v libx264 -profile:v baseline -level:v 3.0 -c:a aac -b:a 128k output.mp4

Let's break down the command and all the options passed in:

  • -i input_file: Specifies the input file name or path. Make sure to include the file's extension ( .mov, .webm, etc)
  • -c:v libx264: Sets the video codec to H.264 using the libx264 encoder.
  • -profile:v baseline: Sets the H.264 profile to baseline, which provides compatibility with a wide range of devices.
  • -level:v 3.0: Specifies the H.264 level to 3.0, which corresponds to the video bitrate and resolution limits.
  • -c:a aac: Sets the audio codec to AAC.
  • -b:a 128k: Sets the audio bitrate to 128 kbps.
  • output.mp4: Specifies the output file name or path. The .mp4 file extension indicates the MP4 container format. Feel free to change the name of the file.

Create Ogg video

Alright, on to our next format. Now we'll make another version of the video that uses Theora video and Vorbis audio codecs in an Ogg format. The support for the Ogg video format, specifically using Theora video codec, can vary among web browsers. The following browsers support the Ogg video format:

  • Mozilla Firefox: Firefox has native support for Ogg video with Theora codec. It's one of the browsers that offers good support for this format.
  • Opera: Opera has historically supported Ogg video with Theora codec, but in recent versions, it has shifted focus to support WebM with VP8 or VP9 codecs.

While Firefox and Opera historically have better support for Ogg video with Theora codec, the broader industry trend has moved towards the WebM format with VP8 or VP9 codecs for open video standards. 

ffmpeg -i input_file -c:v libtheora -c:a libvorbis output.ogv

Here's an explanation of the command:

  • -i input_file: Specifies the input file name or path.
  • -c:v libtheora: Sets the video codec to Theora using the libtheora encoder.
  • -c:a libvorbis: Sets the audio codec to Vorbis using the libvorbis encoder.
  • output.ogg: Specifies the output file name or path. The .ogv file extension indicates the Ogg container format.

Create WebM video

Finally, make one version of the video that uses WebM format, with VP8 and Vorbis codecs. WebM is a widely supported video format, and most modern web browsers offer native support for it. Here is an overview of browser support for WebM:

  • Google Chrome: Chrome has native support for WebM, including the VP8 and VP9 video codecs and the Opus or Vorbis audio codecs.
  • Mozilla Firefox: Firefox supports WebM with VP8 and VP9 video codecs and the Opus or Vorbis audio codecs.
  • Microsoft Edge: Edge supports WebM with VP8 and VP9 video codecs and the Opus or Vorbis audio codecs.
  • Safari: Safari has limited support for WebM. As of now, Safari on macOS supports VP8 and VP9 video codecs but does not support Opus audio. Safari on iOS does not support WebM at all.
  • Opera: Opera supports WebM with VP8 and VP9 video codecs and the Opus or Vorbis audio codecs.

Overall, WebM with VP8 and VP9 video codecs and Opus or Vorbis audio codecs provides good compatibility across major browsers.

ffmpeg -i input_file -c:v libvpx -b:v 1M -c:a libvorbis output.webm

Let's step through this command:

  • -i input_file: Specifies the input file name or path.
  • -c:v libvpx: Sets the video codec to VP8 using the libvpx encoder.
  • -b:v 1M: Sets the video bitrate to 1 Mbps. Adjust this value as per your desired quality and file size trade-off.
  • -c:a libvorbis: Sets the audio codec to Vorbis using the libvorbis encoder.
  • output.webm: Specifies the output file name or path. The .webm file extension indicates the WebM container format.

Now you have a version of your video in all formats supported by the HTML5 video element. With this, you should get maximum compatibility across browsers. Follow Cosmos Media for more tips on automating your media workflow and our blog, for more video engineering content.

Make your videos watchable across browsers