If you're looking to adding video to your site and getting your video to play on all devices including Android and Apple iPhone and iPad, then you need to start thinking of using HTML5 video. For years we've been using Flash video, but unfortunately Flash isn't supported by Apple iOS devices and the Adobe Flash Player for Android has been revoked. This guide will show you how to convert your videos into HTML5 and include them into your site.
The first step we need is the original source video, then we'll convert it to the appropriate HTML5 video formats. It would've been great if we could convert it to one format and be done with that but there are 3 HTML5 formats that we'd need to convert the video to. The 3 formats are WebM, Ogg Theora and H264. The reason for this is that some browsers don't support all formats and to cater for cross browser and device compatibility we'd need to convert to all three.
We'd need to use a video converter. There are a few out there on the market some are free, others are paid for. The one I recommend is Miro Video Converter as it supports all the formats required for HTML5 video.
Drag the video into the application, next on the button labelled Format choose Video WebM HD or SD depending on the original quality of the video. For the video I’m choosing, I’m sticking with SD (Standard Definition) then Click Convert. Choose the other 2 formats, MP4 and Ogg Theora.
Once you’ve completed the videos you’ll have 3 additional files in the output folder.
There's a new HTML tag called
<video> that will allow us to embed the videos to the site. Inside your HTML tag add the following code:
By doing so, this will allow the video to be added to the site. Load the page in a browser and you'll see that the video has loaded but does not play.
There are couple of attributes that we may want to add. One is controls and the other is autoplay so the line of code would look like so:
<video src="video.mp4" controls autoplay>
Unfortunately this video would only play in a couple of browsers and to make it cross browser compatible we would need to support the other video formats.
To do this, we would need to include the
<source> tag. Below is an example showing how to include all 3 formats for cross-browser compatibility.
<video controls autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
<source src="video.webm" type="video/webm">
Don't forget to add the
type attribute to let the browser know what format each file is. Also make sure that the first option is always the MP4 file as early iOS devices would not play the video if the file was not the first in the list.
By doing the above, you would've added HTML5 video to your site and made the site work with all modern browsers. Bear in mind that there are still a lot of users on old internet explorer versions 6, 7 and 8 that are not HTML5 compatible and you'd need to deliver the video in the older Flash format for them to be able to view it.