HTML5 Video Test Page

In this article, there is a short test video for HTML5.

The video is in the three common web formats MPEG (.mp4), WebM (.webm), and OGG (.ogv). In this article we provide each format in its own video tag, allowing you to see if a browser supports one of those video formats. The article looks at some of the attributes, i.e., the options, available for the HTML video tag. The HTML video tag examples provided show you how to control some aspects of the initial load and playback of the video embedded in a web page.

Check Browser Support for the HTML Video Tag

If your browser, software or device supports the video tag that was introduced with HTML5 then you will be able to play one of the video formats. You will also be able to determine whether your browser supports one, two or all three of the common formats and whether those three formats can all appear in the same video tag. The recent versions of the most popular browsers (Chrome, Firefox, Safari, Edge and Opera) all support the HTML5 video tag and even the latter versions of Internet Explorer. The following 8 tests look at different aspects of the video tag.

1: HTML5 MPEG Video Test

If you can see the start of this MP4 format waterfall video and can play it, then your browser supports MPEG video playback (.mp4):

The above is equivalent to this example HTML code:

<video controls preload="metadata">
    <source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
    Video not supported.
</video>

2: HTML5 WebM Video Test

If you can see the start of this WebM format waterfall video and can play it, then your browser supports WebM video playback (.webm):

The above is equivalent to this example HTML code:

<video controls preload="metadata">
    <source src="http://www.example.com/waterfall-video.webm" type="video/webm"/>
    Video not supported.
</video>

3: HTML5 Ogg Video Test

If you can see the start of this Ogg waterfall video and can play it, then your browser supports Theora Ogg video playback (.ogg or .ogv):

The above is equivalent to this example HTML code:

<video controls preload="metadata">
    <source src="http://www.example.com/waterfall-video.ogv" type="video/ogg"/>
    Video not supported.
</video>

4: HTML5 Video Test with Preload of None

For the HTML video tag the preload attribute controls how the browser should load the video, the possible values are:

none – The video is not accessed until the user presses play. It uses the least browser resources.
metadata – The browser accesses the video file to determine information such as running time, size and first frame, a suitable setting for most web pages.
auto - Tells the browser to get the whole file ready for playing, not a suitable setting for mobile devices, or for speed or size-limited Internet connections, good for Intranets. Default setting.

Note that preload is a hint to the browser, so browsers may ignore this setting. In the video that follows preload has been set to none. A browser will show a placeholder for the video and the video controls, the video should play when started.

The above is equivalent to the following example HTML code. Note that this is an example of the video tag that contains multiple source tags so that a browser can choose the best format that it supports:

<video controls preload="none">
    <source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
    <source src="http://www.example.com/waterfall-video.webm" type="video/webm"/>
    <source src="http://www.example.com/waterfall-video.ogv" type="video/ogg"/>
    Video not supported.
</video>

5: HTML5 Video Resize Test

The width and height attributes (in pixels) on the video tag can be used to resize a video. Note that videos retain their aspect ratio and if the new width and height do not respect that aspect ratio then dark bars will appear on either side of the video. If necessary just resize in one dimension (e.g. width) to prevent the bars from appearing. In the video that follows the width has been set to 216 and the height to 120.

The above is equivalent to this HTML code:

<video width="216" height="120" controls preload="metadata">
    <source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
    <source src="http://www.example.com/waterfall-video.webm" type="video/webm"/>
    <source src="http://www.example.com/waterfall-video.ogv" type="video/ogg"/>
    Video not supported.
</video>

For responsive web page design, you may need the video to resize automatically. This can be done in a Cascading Style Sheet (CSS) for the web page. For example, by setting the max-width to 100% and height to auto in the CSS for the video tag:

video {max-width: 100%; height: auto}

The CSS for this web page does that (try resizing this web page in a browser to see it in action, though the videos are small to begin with.

6: HTML5 Video with Poster Image

Using the poster attribute on the HTML video tag a title slide can be displayed before the user plays the video.

The above is equivalent to this example HTML code:

<video controls poster="http://www.example.com/waterfall.png" preload="metadata">
    <source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
    <source src="http://www.example.com/waterfall-video.webm" type="video/webm"/>
    <source src="http://www.example.com/waterfall-video.ogv" type="video/ogg"/>
    Video not supported.
</video>

7: HTML5 Video with Initial Sound Off

The muted attribute on the HTML video tag turns off the audio track. The video controls normally allow the sound to be turned back on.

The above is equivalent to this example HTML code:

<video muted controls preload="metadata">
    <source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
    <source src="http://www.example.com/waterfall-video.webm" type="video/webm"/>
    <source src="http://www.example.com/waterfall-video.ogv" type="video/ogg"/>
    Video not supported.
</video>

8: A Video Tag with Multiple Attributes Test

The above is equivalent to this example HTML code:

<video width="216" height="120" controls muted poster="http://www.example.com/waterfall.png" preload="metadata">
    <source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
    <source src="http://www.example.com/waterfall-video.webm" type="video/webm"/>
    <source src="http://www.example.com/waterfall-video.ogv" type="video/ogg"/>
    Video not supported.
</video>

Further Information

See also the Video for Everybody article for more information on supporting video playback using HTML on a web page.

Real World HTML5 Video Tests

When this article was first written in early 2013 none of the major web browsers supported all the features of the HTML video tag. Having reviewed the article in 2016 many of the web browsers supported almost all of the above video tag functionality. The only exceptions were the latest versions of the Microsoft browsers, Internet Explorer 11 and Edge, and the Safari browser without support for WebM or Ogg video formats. Plus the Edge browser ignored the preload attribute setting of none. For a while, it has been recommended that video on a web page should be provided in three formats, MPEG-4, WebM and Ogg. However, with MPEG-4 now universally accepted both WebM and Ogg could be dropped. However, when supporting older browsers and devices WebM and Ogg formats can be helpful.

Update 2023: In 2020 the Microsoft Edge browser moved to the same underlying technology as the Chrome browser. This means they both support all of the three video formats tested above (MPEG, WebM, and OGG).

Comments

Monica on 29th July 2024 at 23:32 said: I can see the video in all formats but I do not have audio in any format on my browser. I have tried every option that has been written but still no audio. Please help me regain audio capabilities on the Firefox Developer Edition Browser. Thank you, Monica

Hi Monica, I'm assuming you have double-checked that the HTML markup is correct. I've had a couple of other reports of the Firefox browser not playing back audio. If the audio playback works on another browser, e.g., Chrome or Edge, then it will be an issue with Firefox. See their Fix common audio and video issues article and if required report a Firefox bug. If other apps are not playing audio then it will be an operating system issue, e.g., see these articles: