HTML 5 video is the here and now of online video and is the default of how video is delivered via the web, but is currently not supported on older browsers in, particular version Internet Explorer 8 and earlier, you still have to provide an alternative format for those older browsers and undoubtedly that will be Flash as a fall back method (other alternatives are QuickTime and Silverlight, but Flash is more widespread and easily deployed solution).
You need to support and embrace HTML 5 because you can’t play Flash video on Apple’s iOS devices and that isn’t going to change anytime soon. Video also needs to scale to support a myriad of devices, so responsive techniques are now required to allow you to serve 1 video file to a number of devices. Each video player discussed here has links to specific pages for that player and how to set it up and also tweak them to use for responsive design and layout.
HTML5 Video Solutions Set Ups & Guides
YouTube & Vimeo
One of the easiest and free methods to deliver HTML5 video with flash fallback is to host the video on free services like YouTube and Vimeo, all you really need to care about is inserting the embed code onto your page and you are good to go. These services will look after when to deliver the video as HTML5 and when to deliver as Flash you just don’t have to think about it.
Here is a couple of guides of getting both Vimeo and YouTube videos set up and also responsively scaling them in all browsers and iOS devices.
Sometimes though you may need to deliver videos outside of these services and there are a number of solutions, time first though to delve into some of the format issues…
Native HTML 5 Video Formats
Browsers that support HTML 5 video support 3 video formats MP4, OGG and WebM, but not all browsers support the same format which starts to confuse the issue:
MP4
- Safari 3+
- Internet Explorer 9+
- Chrome (wasn’t meant to be but it certainly is!)
OGG
- Firefox 3.5+
- Chrome 3+
- Opera 10.5+
WebM
- Firefox 4+
- Chrome 6+
- Opera 10.6+
So the bad news is that there is no single format that can run in all browsers and you need (should) to support those browsers or the page displayed will have just a black box with a error message about missing plugin media issues.
MP4 would be the ideal format for everything as this is also used for the fallback Flash video, it is high quality and out there in abundance, but not on Firefox and Opera as it has licensing payment issues which those browser vendors would rather use a license free format. Chrome also initially declared it would drop support for mp4 with the H.264 codec but this has not happened. So MP4 almost covers the gamut apart from Firefox and Opera.
Which leads on to the OGG and WebM formats, OGG kicked off first but is not as good in quality, then came WebM a couple of browser versions later which equals MP4 in terms of quality. So all Firefox, Chrome and Opera versions will support OGG and WebM going forward but there a few older versions of these browsers that cannot play WebM.
So supporting both OGG and WebM formats is a pain, lets look at some browser statistics.
Browser Share August 2013
- Chrome 52.9%
- Firefox 28.2%
- Internet Explorer 11.8%
- Safari 3.9%
- Opera 1.8%
MP4 is a no brainer that it needs to be supported, but what about OGG and WebM, going forward WebM seems the best choice because of the quality issue, so what are the stats for the slightly older browsers of FireFox/Opera/Chrome that don’t support WebM the versions and % mark up are listed as below are as follows:
- Firefox 3.6 = < 0.8%
- Chrome 3 – 5 = < 1%
- Opera 10.5 = < 0.1%
Looking at those stats I would be very tempted to just lose OGG and just stick with WebM and live with fact that occasionally a few users are going to get a blank rectangle on their browser with which that figure will further diminish over time.
HTML 5 Video HTML 5 Code Mark Up
<video width="480" height="300" controls="controls" preload="auto" poster="path-to-poster.jpg"> <source src="path-to-mp4.mp4" type="video/mp4" /> <source src="path-to-webm.webm" type="video/webm" /> <source src="path-to-ogv.ogv" type="video/ogg" /> </video>
The mark up for video is open and closed by the video tag. The attributes inside the tag include the width and height of the video, controls, preload, poster (the initial static image on load) and the source URLs for the 3 (or 2 if you drop OGG) video formats. This is great for all HTML 5 ready browsers but we also need a fall back for older browsers that don’t support HTML 5 and this is where Flash comes to the rescue.
Flash Fall Back Code Generator Video
There are many Flash code generators – Adobe provides a free and easy to use Flash Player fall back.
– You need to have your video mp4 file stored on a server and have the URL pasted down and ready to use (use can use the same source as your .mp4 used in the source attribute for the HTML5 video version).
– Flash fall back code generator – http://osmf.org/configurator/fmp/
flash-fall-back to html 5 video
– Set up in the basic tab is fine – the key fields you need to fill:
- the video source URL – where the video is filed
- the width and height
- a poster frame – an image of the same width and height and filed preferably in the same source as the video
- play button
– Once you have entered the details click on preview and then grab your code.
Paste your Flash fall back code just in front of the end of the closing video tag </video> this will then use the <object> embedded flash video in browsers that don’t support HTML 5.
So now your video will play in native HTML 5 browsers with the browsers inbuilt video player and also on iOS devices and then will also fall back to Flash video on older browsers which don’t support HTML 5.
HTML5 Code Generator
You can also get your HTML 5 video code built for you by various code generators – same details are required, a URL to the video formats, width, height, poster image URL, various controls, an example of this can be found at – http://sandbox.thewikies.com/vfe-generator/
HTML5 Video Browser Web Server set up and Web Server Errors
Ensure your web server can serve the relevant file media types – if some browsers get media errors add the following mime types to the ‘.htaccess’ at the root web serving folder:
AddType video/mp4 mp4 m4v AddType audio/mp4 m4a AddType video/ogg ogv AddType audio/ogg ogg oga AddType video/webm webm
Further info on Firefox and mime video format errors.
Video Encoder Tools
To encode to MP4 use Handbrake or MPEG Streamclip
To encode to OGG and WebM use Firefogg
To encode to either use the very cool Miro Video Converter
So there is still a bit of work in getting this all to work – and there is also the issue of the look of the players as they vary in different browsers, it would be great to make them look the same cross browser and iOS device – solutions available include… Video JS, MediaElement JS, JW Player, Sublime and Video for Everybody Generator.
Video JS
What the Video JS Script is, is a javascript library and CSS file that makes the player skin the same across the different browsers.
The javascript and css files are stored on a remote server (you can download and host yourself) links needed to be put in the head of your html document are:
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/4.0/video.js"></script>
And then in the <video> tag add a CSS class and data set up attribute:
<video class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="path-to-poster.png"
data-setup="{}">
<source src="path-to-mp4.mp4" type='video/mp4'>
<source src="path-to-webm.webm" type='video/webm'>
<source src="path-to-ogg.ogv" type='video/ogv'>
</video>
This is all the work of Steve Heffernan at Video JS and works great. Its just been upgraded to version 4 and I personally think is the best tool. You can just include a MP4 only and non-mp4 browsers are served Flash video.
Example VideoJS set up and responsive technique here.
MediaElement JS
This works kinda the same way as VideoJS with a twist and is the work of John Dyer. This solution is now part of the core code in WordPress.
The key difference is how the code handles Flash fallback, all new browsers play the HTML5 video natively whilst older browsers are visually ‘upgraded’ via the javascript to mimic HTML5 compatibility. So in effect all browsers have the same looking player HTML & CSS. This is also now the case in VideoJS..
The javascript and css files need to be stored on your server along with the rest of the files in the ‘build’ directory, links that need to be put in the head of your html document are:
<script src="build/jquery.js"></script> <script src="build/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="build/mediaelementplayer.css" />
The script is best kicked off with jquery either use in the body or include in your custom js script
$(document).ready(function() {
// jQuery method
$('video, audio').mediaelementplayer();
});
Example mediaelement set up and responsive technique here.
JW Player
JW Player was more of a Flash solution but also delivers HTML5. It is now delivering HTML5 video over Flash and the latest version has come a long way. You download the JW Player files and move them to the root of your website. In the head of your document add these scripts.
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="ABCDEFGHIJKLMOPQ";</script>
The first script uses a free player but has a JW logo, if you want to go pro you need to buy a license and add the key in the second script. Add in the javascript for the video as below
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "/uploads/myVideo.mp4",
image: "/uploads/myPoster.jpg"
});
</script>
Example JW Player set up and responsive technique here.
Sublime
Sublime is a slick solution and does a lot of the work for you with many add ons.
Sublime will host your videos (optional), free and at a cost, the free service is http only not https. The free player has a Sublime logo branded in the video player for a couple of secs.
There is a code generator on the site which is easy to use and you are given Javascript to include in your page header as well as the video code for the body of your page.
The whole thing works very smoothly, you just need an MP4 source file which is delivered in HTML 5 Video with a Flash fall back served for older browsers and non-compliant MP4 browsers.
sublime-video-generator
What Is good about this creator code is that you only need to pass in an mp4, so in Firefox, Chrome and Opera the video is delivered via Flash, so you only have to work with 1 format. You can get your video code with a lightbox functionality pre-built which the other solutions can’t do without custom code.
Example Sublime set up here .
Wistia
Wistia is another slick solution, sign up for free and get 3 videos hosted and 5GB of bandwith, after that there is a pricing scale, you upload your videos to the site and get an iframe code in return. It will detect and play flash format and mp4 on tablet/mobile. Nice and easy.
Example Wistia set up here .
Video for Everybody Generator
The ‘Video for Everybody Generator‘ or VFE is the business, it is both a html and flash all in one generator. Plug your details in, choose your preferred Flash Player and grab the code. What is even better that in the code is a download link to the video files as the ultimate fall back if the user didn’t have HTML5 or Flash capabilities.
video-for-everybody-code-generator
The only issue here is that you need to supply a WebM or OGG source to satisfy Firefox/Opera HTML 5 browers otherwise nothing will load. Also there is no player skin, by default each browser default skin displayes, which are all different.
What you can do here is take advantage of the code generator and then combine it with Video JS to get the unified skin and controls!
Example VFE set up here
So there is plenty on the table here and it really depends on what your needs and preference ends up being, Sublime is very cool but you have less control and it will start to cost for more flexibility, VideoJS I think is the better solution and is very robust, but keep your eyes open for more functions like lightboxes and carousels.