Tek Eye Logo

Tek Eye

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), OGG (.ogv). Each format is in its own video tag.

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 (Internet Explorer, Chrome, Firefox, Safari, Edge and Opera) all support the HTML5 video tag. 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, uses the least 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 to make the video half the orginal size.

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>

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>

Other HTML5 Video Attributes

  • autoplay – Starts the video playing as soon as the page is load (some users find this annoying and prefer to start the video when they are ready).
  • loop – Returns the video to the beginning when it has played to the end.

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 revisted the article in 2016 many of the web browsers now support almost all of the above video tag functionality. The only exception being the latest versions of the Microsoft browsers, Internet Explorer 11 and Edge, and the Safari browser not supporting WebM or Ogg video formats. Plus the Edge browser ignoring 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.

Acknowledgements

The waterfall video was sourced from the Internet Archive – http://archive.org/details/PeacedelichiroyukiNakanoWaterfallJapanIZU

Author:  Published:  Updated:  

ShareSubmit to TwitterSubmit to FacebookSubmit to Google+Submit to LinkedInSubmit to redditPrint Page

markdown CMS Small Logo Icon ↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.



Articles on:

Android, HTML, VPS, Computing, IT, Computer History, ↓markdown↓ CMS



Free Android Sample Projects:

Android Examples, Android UI Examples