Make your videos watchable across browsers

In order to make your videos watchable across browsers, you'll 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

Back to our task at hand, let’s 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, and it's a good practice to encode MP4 videos using widely supported codecs like H.264 for video and AAC for audio. To create an MP4 video with an H.264 video codec and AAC audio codec, run the following FFMPEG command in your terminal.

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.

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. Run the following command in the terminal to encode a video into Ogg format:

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

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’s the FFMPEG command you’ll run to encode a video into WebM:

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

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.