A while back I gave an HTML5 overview with the intention of writing more about each of those areas. So this is one of those and is dedicated to HTML5 video. The same methods apply to audio even though audio is not explicitly covered here.
For everyone that has created websites in the past using previous versions of HTML, you will know the difficulties involved in trying to embed video into those pages. The easiest way for most people was to convert the video to Adobe Flash and rely on the fact that most browsers had the free Adobe Flash Player plug-in installed (and if they didn’t they could easily obtain it).
Having large plug-ins installed and activated in your web browser gives you a slower experience than without them. Some people with Flash were starting to turn it off and Apple refused to allow it iPad or iPhone. For website developers Flash was an issue as well as it meant paying for a license to use it, knowing how to convert video to the Flash format and knowing how to handle users that didn’t have the Flash Player plug-in available in their browser.
There were of course a number of other plug-ins but none of these were lightweight and none were supported natively across all of the major browsers. Until, that is, HTML5 came along with the specification including native support for both video and audio. However, some browser manufacturers have yet to support all video formats. In this article, I will show you how to easily add video to your web pages without using Flash and explain how to handle cross browser compatibility issues.
HTML5 video basics
The easiest way to create HTML5 video code is to use an application such as Easy HTML5 Video but here I will show the code to use in your HTML5 web page. Movies use the “video” tag and sound files use the “audio” tag.
<video>
<source src=”myvideo.mp4″ />
</video>
You can specify your video dimensions and whether to show controls, whether to autoplay the video , whether to mute it by default and whether to play it in a continuous loop. There is also an option to preload the video whilst the page is loading and to display a start-up image called a poster. You don’t need to specify these options unless you want to include them, so if you don’t want your video to autoplay just exclude the option. Here’s an example that sizes the video, shows the controls and displays a picture.
<video width=”800″ height=”600″ controls =”controls” poster=”mypicture.jpg”>
<source src=”myvideo.mp4″ />
</video>
Here’s a table of the video options.
| Attribute | Values |
| autoplay | autoplay |
| controls | controls |
| height | numeric pixel value |
| loop | loop |
| muted | muted |
| poster | text URL of an image |
| preload | auto metadata none |
| width | numeric pixel value |
HTML5 video in action
Just so that you can see how it works, here’s a simple video that is muted by default and that tells the browser to preload what it can in the background as the page is loading.
The video uses the following code:
<video style=”width:100%” controls =”controls” muted=”muted” preload=”auto”>
<source src=”https://pathowe.co.uk/wp-content/uploads/2017/02/phwswebsite.mp4″ />
</video>
I have reduced the size of the video in the browser as the original size was 1132 pixels wide by 636 high. Most browsers cope with resizing but sometimes you will lose quality by doing it this way. It is much better to convert the video to the size you want to display it before adding it to the page as video editing software is much better at handling video resizing.
You can customise the user interface and even create your own set of controls to replace the browser default controls by using JavaScript. I will not be covering that today.
Browser compatibility issues
The “source” tag contains the URL to the video in the “src” attribute but it can also contain the MIME type and any codecs you want to specify. This can be important to enable a website browser to pick the right version of the video to play.
Certain browsers might not support the video format that you have created so you may need to have more versions of your video in different formats to cope with more browsers. This does not mean you will have to have several video instances spread across the page for the user to select the version that works. HTML5 video only needs to include on the page once but you can specify many different formats. The browser will look down the list and select the first one it supports.
Note that in iOS 3, only the first source is checked and Android < 2.3 doesn't support type attributes in the source tag so if you want to support both of these you should include MP4 first and leave out any type attribute.
Some very old browsers such as Internet Explorer 8 or earlier do not support HTML5 video playback so for those you might want to a Flash version and as a last resort include a background image with fall-back text.
Here’s a code example of a HTML5 page supporting some different video sources with a default image for unsupported browsers.
<!doctype html>
<html>
<head>
<title>HTML5 Video Example</title>
</head>
<body>
<video width=”320″ height=”240″ controls =”controls” autoplay=”autoplay”>
<source src=”myvideo.mp4″ />
<source src=”myvideo.webm” type=’video/webm; codecs=”vp8, vorbis”‘ />
<source src=”myvideo.ogv” type=’video/ogg; codecs=”theora, vorbis”‘ />
<img alt=”My Video” src=”myvideo.jpg” style=”position:absolute;left:0; ” width=”320″ height=”240″ title=”Video playback is not supported by your browser” />
</video>
</body>
</html>
However, there’s good news. All of the popular modern browsers (Chrome 4+, Internet Explorer 9+, FireFox 3.5+, Opera 10.5+ and Safari 4+) on different platforms now support a common format in MP4. Firefox does not yet include MP4 video on a Mac but does support it on Windows and Android. If your video is in MP4 format, 80% of website visitors will be able to view it in that format. Personally, I no longer worry about supporting those on non-compliant browsers, especially since less than 8% of website traffic now comes from the unsupported Internet Explorer 8 or below.
If you are after more information on browser market share and compatibility issues, visit The State of HTML5 Video which was recently updated.
Related articles
This is part of a series of articles covering the new features of HTML5. You can find an up-to-date list of those from the Development – HTML5 category.