Integrating HTML5 video with your website

The HTML5 video standard became popular after Adobe Flash was cursed by Apple. Adobe ruled for long with Flash as the standard to present videos in a web browser.

Steve Jobs was furious on Adobe

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 had limited market potential. As we now know from the Steve Jobs biography was furious. Some say that killing Flash was a payback effort to get even.

Youtube and other video sites including adult oriented sites were about to miss the boat if, at that time, the Apple iPad (without Flash support) would start to rock.

Apple MP4 as the new standard?

In a relatively short period the by Apple developed MP4 format was embraced as the new standard for web videos. In that same period web developers were rapidly adopting the HTML5 video standards even with a Flash fallback option for older browsers, as Adobe Flash was about to die.

HTML5 video

HTML5 video is intended by to be the default way to present videos on the web without using additional plugins. This has however been hampered by lack of agreement as to which video formats should be supported in web browsers. It is supported on all modern versions of web browsers.

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

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?

Stream and play considerations

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.

For a customer I had to build a support system based on Sencha Ext JS. The content was maintained within a Wordpress backend. The customer required that the videos were streamed via their own intranet server. I included the Flowplayer jQuery plugin, but experienced that with MP4 support only viewing was limited to Safari and Google Chrome browsers. Even Internet Explorer was incapable to show the videos.

Solution to Wordpress webm security problem

There was also a problem uploading the videos in webm format with the media uploader of Wordpress. It seemed that the mime type for the webm video format was not accepted. But as always there is a plugin for this. After installation you add the mime type and uploading 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 large when it comes to size. So be aware that you might require separate ftp software to upload them to your server. The Firefox fireftp add-on works well, when you look after 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 within the Wordpress media manager. So you have to remember the url to your videos in some way.

Another way of making it possible to upload larger videos is to ask your web administrator to increase the upload size to f.e. 100 Mb.

We need more space

The conclusion is however that at our customer choices had to be made.

• Everyone is using the same browser
• You put your videos in at least 3 formats on the server.

To be sure we decided to do the latter. But be aware that all video formats consume about the same amount of disk space so you have to triple the required amount of disc space for every video.

Cross domain

A great benefit however is that a HTML5 video player doesn't require the videos to be on the webserver within your own domain (cross domain). It will work when your videos are on www.myvideos.com and your Wordpress installation is on www.mywebsite.com.

Sample of a HTML5 video versus a video service (Youtube, Vimeo)

Flowplayer is a video player, it is intended to play streaming video from video services as Youtube or Vimeo.

Youtube sample (video at Youtube)

Vimeo sample (video at Vimeo)

Conclusion

When you need to use streaming video on your website, consider if you have the web space and capacity to stream through your own resources. For my customers I never recommend to stream by themselves and use a (commercial) streaming solution. Most of my customers host their protected videos on Vimeo. It is affordable, no commercials and you save lots of capacity and bandwidth.

Links

Simple link to test your browser compatibility for HTML5 video