HTML5 has been a hot topic for some time now but in many ways it’s becoming more of a norm. At Mydeo, I’m seeing more and more of our customers jumping on the <video> tag bandwagon and for good reason too. The use of Flash is slowing down mainly due to the lack of support in iOS devices but it’s also interesting to add that the latest versions of Android are also dropping support. Android and iOS are the market leaders for smartphones and tablets and together control over 85% of the overall pie. Consumers demand their videos on the go and if you’re still using the ye old ways of Flash then you could be losing a sizeable chunk of your audience to your competitor who has already utilised a solution for reaching these devices.
I’m here to tell you that you don’t need to spend the whole of your quarterly budget on a video platform just to reach smart devices. This post will show you how to embed videos on your site using the <video> tag. It will also show you how to reach multiple browsers and devices because not all end users have the same equipment/software. I will use video files that have already been uploaded to the Mydeo servers to test with.
In the example below you’ll see a standard HTML page but with the addition of the video tag that’s referencing a file on the Mydeo servers. If you copy this code and paste it into notepad and save the file as a .htm or .html, the file will open as a web page containing the video. This, in its current format will also play on iOS devices.
<html>
<head>
<title>My HTML5 Video</title>
</head>
<body>
<video src="http://mydeo.vo.llnwd.net/o1/u/m3/64de828ce3264daf912aa3493414a30d.mp4" controls="controls" height="480" width="620"></video>
</body>
</html>
If the video is not playing for you, there’s a good chance that the browser you’re using doesn’t support .mp4 or HTML5 at all. To reach almost every browser/device, we need to do a few more things.
The example below has a few additions: firstly, I have moved the source tag onto a different line and added support for three different file types: mp4, ogv (ogg) and webm. These three files types are the video formats excepted by HTML5 so by referencing all of them, you’ll reach a better percentage of end users. All the files referenced here are the same video but I’ve just converted them into the separate file types (information on how to convert you videos for free is mentioned later in the article). Secondly, if you want to be able to reach users using older operating systems with older browsers, you can also add a traditional Flash player (see the code example on how to add a Flash player). The player below is coded so if the first option doesn’t work, the browser will seamlessly attempt to play the second option and then the third and so on. This process is called a ‘fall back’, the browser falls back until it finds a compatible version to play.
<html>
<head>
<title>My HTML5 Video</title>
</head>
<body>
<video controls="controls" height="480" width="620">
<source src="http://mydeo.vo.llnwd.net/o1/u/m3/64de828ce3264daf912aa3493414a30d.mp4" type="video/mp4" />
<source src="http://mydeo.vo.llnwd.net/o1/u/m3/59243cfe69c74f3ebc26d14cb29e9b96.webm" type="video/webm" />
<source src="http://mydeo.vo.llnwd.net/o1/u/m3/160a3cd44c074efcae8b1fbb784aca9f.ogv" type="video/ogg" />
<--! Here is where you add code for a traditional flash player, you can use the mp4 URL above and generate yourself a player by navigating here: http://blog.mydeo.com/2013/01/25/flash-video-player-generator/ -->
</video>
</body>
</html>
And that’s it! You can use the code above to create your own HTML5 player, all you need to do is replace the source URLs with your own. There are many different options for customising your player so be sure to have a play around with the code. If you need to convert your files into mp4, ogg or webm then there is a fantastic video converter which is 100% free and can be downloaded here: http://www.mirovideoconverter.com/.
Remember that these test files are utilising Mydeo’s servers so if you need a hosting provider to deliver your HTML5 videos over a super fast global network, then do not hesitate to contact us. You can do so by email: m3@mydeo.com or by phone: +44 208 540 2300.
Read Full Post »
