When Written: Dec 2012
I am currently engaged in the redesign of a couple of current web sites and when it comes to a redesign it is a good time to think about any new technologies that could be employed to improve the user experience as well as future-proofing the design against any new requirements from these users and the devices that they are using to access your client’s site.
Videos play a large part in explaining the Babyglow product
New features or technologies constantly come along in the web development world as we all know. Many of these are announced with glowing reports of how this will be the way to go and how much easier this particular technology will make a particular task that you will wonder how you ever managed before. I found this to be the case with the new HTML 5 <video> tag The various blogs were full of praise and excitement about this addition to the HTML specification and I was looking forward to working with it. The idea behind this tag is that the browser will be able to handle the display and playing back of videos without any extra supporting plug-ins. In the past Flash would often be used for this task but with the increasing use of devices like the iPad that do not support Flash because of worries about security and alleged effects on the stability of the operating system, , this route is no longer a valid one.
Using the jQuery jPlayer object can remove some of the browser differences of the video tag.
The advantage of using such players is that they can have the same facilities across all browsers like view full screen and if you want to code against the video player- for example to show progress bars – then having a single object model to code against rather than the different ones in the various browsers can make for a slightly easier life. Another example of the different handling of the video tag is how the browser deals with the initial loading of the video. Video files are often very big and so it is important for a good user experience that the browser should be able to start streaming of the video before it has fully loaded. Safari, Chrome and Opera download the entire video on page load and automatically buffer. However, whilst Opera and Chrome will be able to play the video almost immediately, Safari needs more of the file before playback can begin. Firefox does not download the entire video unless the ‘autobuffer’ attribute is set on the video tag. So as you can see, there are several small differences in the way each browser handles videos which is enough to give you more grey hairs. Using a video player can help negate these problems but you may later have compatibility problems with future browsers. If you really want your web pages to take full advantage of the advances in the browser’s built in video player object then you probably really are better off just using the HTML5 video tag and if the browser does not support this then have your code written such that it will fail gracefully to Flash.
While all this may seem obvious, fairly easy and hardly worth writing an article about, it was my recent work with a client’s web site at www.babyglow.uk.com that made me think that my experiences would be worth sharing. The client was quite insistent that there should be a number of videos on their web site that help explain their unique product and how it worked. Previously they had used Flash for this. However with more complaints from users with iOS devices that they could not view these videos, something had to be done. Initially the client built a YouTube channel and put the videos up there and used iFrames to display these within their web pages. There were two main disadvantages to this. One is that by using YouTube, after viewing your video users would often ‘wander off’ and watch other videos suggested by the site. The other problem was one of aesthetics. The client’s videos were in a variety of aspect ratio formats. The YouTube player can only display in 16:9 format or with a bit of code, 6:4, which left rather unsightly black borders around some of the videos. So at one meeting about the future of their web site, with a casual remark of ‘You should use HTM5’ the battle began.
Creating the multiple video formats requied with HTML5 video tag with FreeMake
I still feel that a lot of work needs to be done with the ‘<video>’ tag, at present the various browsers between them each support only one of three different video formats, plus of course you will still need a Flash format for pre-HTML5 browsers, so to start with you will need to create and upload three files for each video as well as a Flash version for older non-HTML5 browsers. The production of these files can be quite a task, particularly when you discover that many of the video generation tools will not support all the four formats required. However, I have discovered a very useful free windows tool called Freemake Video Converter (http://www.freemake.com/free_video_converter ) which you can load with all the videos that you want converted and hit the HTML5 button. You will be presented with various profiles that define the quality and size of the final videos; if you expect users to view your videos in full screen then I suggest that you go for at least 640 x 480 , obviously the higher resolution you save at the bigger your files will be and the longer they will take to download to the user’s machine and play. It is a compromise like most things in web design. Once selected, three files of the formats required will be generated for each of the supplied videos. After this has run you can then click on the SWF button to generate the Flash movie that you will also require. On my main box with twelve cores and 16G of RAM the generation of these files is a matter of a few minutes. Whilst you are generating these files it is a good idea to create a ‘poster’ image for each of these videos. A poster image is displayed while the video is loading and it is usual for this image to be a frame from the video. The easiest way I found of creating this image is to pause the video at the place you want the frame from and then use a screen grab tool to capture this image. Once you have your five files for each video you can put them on your web page with the HTML command :
<video width="158" height="120" class="videobox" id=0 controls loop poster="images/myposterimg.png" >
<source src="movies/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="movies/myvideo.webm" type='video/webm' >
<source src="movies/myvideo.mp4" type='video/mp4'>
<!-- If the browser doesn't understand the <video> element, then reference a Flash file. -->
<embed src="movies/myvideo.swf" width="158" type="application/x-shockwave-flash" height="120" allowscriptaccess="always" allowfullscreen="true" play="false"></embed>
Now I did mention that each of these client videos had different aspect ratios ? This was also causing problems of ugly black borders appearing. The answer was to crop these videos to remove these borders. After searching around I found a very useful tool that would do just that, it costs just £32 and is called VidCrop (http://www.geovid.com/VidCrop ) . It only supports a few video formats and can crash when trying to load some video formats but it does easily what many of the video editing tools seem not to do without a lot of work. You may need to convert your client’s videos first before you can use this tool, but by this time you should be getting used to manipulating videos! Once you have done this on a web site that uses several videos and probably done it several times to correct issues at the client’s request you will soon find yourself longing for the simpler days of Flash everywhere!
Easy Video cropping but a little buggy, VidCrop
Without doubt the <video> tag in HTML 5 is the way to go when displaying videos on a web page in the future, as it will use all the power available within the device that it is being viewed on. The number of different video formats required is annoying but each has its own benefits either in terms of licencing or file size. Talking about the later it was interesting looking at the file sizes of the different videos and how they vary in the different formats. Looking at twelve videos that were all converted to the same resolutions I got the following sizes:
Mp4 – IE, Chrome, Safari – 155M – Licenced to MPEG LA
Webm – Firefox, Chrome, Opera – 149M – a free licence format
Swf – Plug in needed not supported in iOS – 122M – Adobe’s Flash format
Ogv – Firefox, Chrome, Opera – 98M – Format owned by Google
As you can see that to fully support all the major browsers as well as older versions there is no getting around the fact that you will need four versions for every video you wish to host.
There is one more problem that you may experience. Sometimes the videos will play fine when you are testing locally but once uploaded to the web server they no longer work. This is because the web server has not been configured to know what to do with these file extensions. What you need to do is to configure the mime types on the web server. The way you do this will vary depending on the web server and also your hosting provider but, for example, if you are using Apache and have access to the httpd.conf file you simply add the three lines:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Article by: Mark Newton
Published in: Mark Newton