Integrating HTML5 video in your website

HTML5 video

The HTML5 video standard became popular after Adobe Flash was cursed by Apple. When Steve Jobs declared the war on Adobe Flash when he introduced the Ipad, Adobe was not amused. In fact many others were not amused. Flash was for long the standard to publish videos in a web browser.

In the biography of Steve Jobs there is an interesting paragraph telling that Steve Jobs once asked the help of Adobe for developing their desktop publishing software for the neXt computer, build by Jobs after he had to leave Apple. Adobe refused to spent much resources on a product with, in their objective, limited market potential. Steve, as we now know from his biography, was furious. Some say that killing Flash, was a payback effort to get even.

Youtube and many other video sites, including adult oriented sites were about to miss the boat if the iPad would start to rock.

MP4 as the new standard, but it’s Apple

In a relatively short time the Apple owned MP4 format was embraced as the format for videos for the web. In the same time web designers were more using techniques and plugins that supported the HTML5 video standards, with a Flash fallback option for older browsers. So finally it seemed to be clarity under the web tower of Babel. But as it seems not all are embracing it the easy way.

HTML5 video

HTML5 video is intended by its creators to become the new standard way to show video on the web without plugins, but has been hampered by lack of agreement as to which video formats should be supported in web browsers. It is supported on all later versions of web browsers.

The idea in itself is great. One standard for all devices. Unfortunately not all browser manufacturers are embracing the most common video formats. In fact there is not one single format that is supported by all browsers.

image

This diagram is taken from the website of FlowPlayer. It shows clearly that no format is supported by all browsers. There is on this website even a rumor that Google will stop their support on MP4. Firefox already stopped their support of MP4, because Apple wants a license fee for this format. Now Firefox has embraced the webm format. What exactly does that mean when you want to integrate video in your website?

Deliver what they ask

To have your videos widely supported by all kinds of browsers, it is important that you support at least those formats that are covering the landscape. It simply means that you have to have an MP4, Ogg and webm version of your video available when you are hosting the videos on your own web server. You can also use a web service like Vimeo or Youtube, where you shift the problem to these services.

I had to build for a customer a help system based on Sencha ExtJS, but where the content was maintained with a WordPress backend. The customer needed the videos to be supported by their own intranet server. I included the Flowplayer jQuery plugin, but saw quickly that with only MP4 support, the view was limited to Safari and Google Chrome. Even Internet Explorer was not to happy to show the videos instantly.

Freemake video converter

Freemake video converterSo I used the easy to use freeware software Freemake to convert all the videos to MP4, Ogg (ogv extension) and webm. In the solution developed, it was important that the customer could do it themselves without great technical skills. Freemake is just one of many video converters, but it has a nice convert to HTML5 video button, which creates all the required formats automatically in one folder. That saves doing the job at least 2 more times.

If you are using Windows 8, make sure you are installing the latest version 3 (not version 4), for it has some issues with registering some DLL’s.

Solution to WordPress webm security problem

It was soon discovered that it was a problem to upload the videos in webm format with the media uploader of WordPress. It seemed that the mime type for the webm video format is not accepted. But as always there is a plugin for this. After installation add the mime type and you can upload the webm files to your WordPress site.

Use for the webm mime type:

  • File extension: webm
  • Associated mime type: video/webm

Upload limit

Videos can be pretty big in size. So you have to be aware that you might require separate ftp software to upload them to your server. The Firefox fireftp addon works well, if you look for a free solution. You can also use Filezilla, which is also free of charge.

If you are using WordPress, the disadvantage of an FTP client is that the videos are not registered in the media library, which makes it not visible for a the WordPress media manager. So you have to remember the url to your videos in another way.

Another way of making it possible to upload larger videos is to ask your web administrator or host to increase the upload size to f.e. 100 Mb. In practice this is in quite some occasions limited to 16 Mb. But not all commercial providers are embracing this demand.

Flowplayer plugin for WordPress

Flowplayer HTML5 video player To make the addition of videos to our pages more easy, the WordPress plugin FV WordPress Flowplayer. HTML5 video however doesn’t require a plugin, but then the user has to do some HTML typing themselves and that is not what we want. The flowplayer plugin has the advantage that it uses a nice skin and has some useful features set globally.

The jQuery Flowplayer plugin can be used freely. It will then show a small flowplayer watermark in the left bottom of your video. If you would like to have no watermark or your own logo, you have to purchase the commercial license. That is not cheap if you plan to use it on more than one webserver (95 USD for one domain up to 995 USD for unlimited domains).

We need more space

The conclusion is however that a choice had to be made. Or everyone is using the same browser, or you put your videos in at least 3 formats on the server. To be sure, we decided to do the last. But what does it mean to your required space? All formats consume about the same amount of space, so you have to triple the required amount of disc space for every video.

The sample below of the Flowplayer has a movie that requires for every video about 87 Mb. That means that one video presentation requires at least 250 Mb. So keep this in mind when publishing videos. You can always experiment a bit with the resolution and the frames per second, but videos are consumers of disc space. When presenting a video instruction created with software like Camtasia to explain your software to a user, you can reduce the framerate to something like 15 frames/second, but you should keep your resolution to at least 720p. Otherwise the characters on the display would not be easy to read to your users. Always keep in mind that users like to press the "fullscreen" button. It even has to look good then.

Cross domain

A great benefit however is that with a HTML5 video player the videos don’t have to be on the webserver within your own domain. It works fine if your videos are on www.myvideos.com and your WordPress installation or application is on www.mywebsite.com. Therefor you can use your videos on any place you need them. Usually a HTML5 video inclusion looks like something like this, according to the HTML5 video standards of W3C:

Sample of a HTML5 video versus Youtube

First of all, Flowplayer is a video player, it is not playing streaming video from a video service like Youtube or Vimeo. The video below is the song Clear the Air from Jacco Gardner, a great performer from the Netherlands (visit his website)

Youtube sample (video at Youtube)

Flowplayer sample (video on own server)

[fvplayer src=’http://databrixx.com/videos/JaccoGardner-ClearTheAir.ogv’ src1=’http://databrixx.com/videos/JaccoGardner-ClearTheAir.webm’ src2=’http://databrixx.com/videos/JaccoGardner-ClearTheAir.mp4′]

Conclusion

It seems that almost everything in IT and on the web is presented as easy. But with videos on the web  we are not talking about a one-click solution. After almost 30 years of experience in IT I see that not much has changed. Commercial interests make that so called standards are introduced as easily as they are abandoned. The customer is not very much respected in this. IT seems to be one of the few businesses where the supplier (developer) and customer constantly have to run after the manufacturer. Internet is a medium where people can share information and interests on an universal platform. Now it becomes about time that standards for a while are worth to carry that name. Cars are also running for years on the same fuel (although more than one type is available), why can’t browsers do it too.

Until then I hope that this article is not outdated too soon.

Links

Simple link to test your browser compatibility for HTML5 video

Johan van de Merwe
Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.

Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.