HTML5 Videos
August 1st, 2011
HTML5 video is a movie and video playing element within HTML5, somewhat replacing the object element. This is due to the on-going evolution of support for the video element. As such a standard way has been adopted, to embed video into a web page. Prior to this, the majority of on-line videos had been channelled via third party plug-ins. Flash (as used by Youtube), Real-player and Quick-time are all examples of video plug-ins integrated with your browser. HTML5 video supports these video elements by enabling them to become native to browsers such as Chrome, Safari, Firefox, IPhone, Opera, Android and IE.
<VIDEO> ELEMENT SUPPORT | ||||||
| CHROME | SAFARI | FIREFOX | IPHONE | OPERA | ANDROID | IE |
| 3.0+ | 3.0+ | 3.5+ | 1.0+ | 10.5+ | 2.0+ | 9.0+ |
Video container formats include Flash Video, Ogg, MPEG 4, WebM, Audio Video Interleave and DirectShow Filters etc. A video player performs three functions simultaneously during transmission. These include the display of serial images on screen by decoding the video stream, delivering the sound to the speakers by decoding the audio stream and interpreting the container format to determine the available video and audio tracks. It also establishes how they are stored in the file, to access the data that requires decoding next. The words ‘coder’ and ‘decoder’ are combined into what is known as a ‘codec’. This portmanteau is often applied to a video codec, which is an algorithm that encodes video streams.
When data is irretrievably lost during the encoding process, it is known as ‘lossy video codec’. However, the advantage is that it provides high compression rates and good image quality. Although there are multitudinous codecs, H.264, Theora and VP8 are the most relevant.
- H.264: MPEG-4 Advanced Video Coding/MPEG-4 AVC/MPEG-4 Part 10. Developed and patented by the MPEG Group, this provides a single codec for low and high bandwidth. This includes mobile phones, desktop computers, Blu-Ray players, Apple iTunes Store, Youtube and Android Mobile Operating Systems.
- Theora: Developed by Xiph.org Foundation, evolved from the VP3 codec and can be embedded in any container format-although most often seen in an Ogg container. Moxilla Firefox also provides native support for Theora Video, without platform specific plug-ins. Other support includes all major Linux distributions for pre-installed Theora. Additionally, Xiph.org’s open source decoder software, enables Theora Video to play on Windows and Mac OS X. Most importantly, another benefit is that this codec is royalty-free.
- VP8: Developed by On2- the same company that produced VP3. This video codec maintains a low decoding complexity level with H.264 Baseline, whilst generating output that is commensurate with H.264 High Profile. This is also licensed as royalty-free, since Google made it open source friendly.
There is no single combination of codecs and containers that operates in every web based HTML5 platform or device. Therefore to make video completely web accessible, you will need to encode it three times. To view which video codecs work most effectively in your web browsers, refer to the following tables:
VIDEO CODEC SUPPORT IN SHIPPING BROWSERS | ||||||||
| CODECS/CONTAINER | IE | FIREFOX | SAFARI | CHROME | OPERA | IPHONE | ANDRIOD | |
| Theora+Vorbis+Ogg | – | 3.5+ | † | 5.0+ | 10.5+ | – | – | |
| H.264+AAC+MP4 | – | – | 3.0+ | 5.0± | – | 3.0+ | 2.0+ | |
| WebM | – | – | † | 6.0+ | 10.6+ | – | – | |
† Safari will play anything that QuickTime can play. QuickTime comes pre-installed with H.264/AAC/MP4 support. There are installable third-party plugins that add support for Theora and WebM, but each user needs to install these plugins before Safari will recognize those video formats.
± Google Chrome will drop support for H.264 soon.
VIDEO CODEC SUPPORT IN UPCOMING BROWSERS | ||||||||
| CODECS/CONTAINER | IE | FIREFOX | SAFARI | CHROME | OPERA | IPHONE | ANDRIOD | |
| Theora+Vorbis+Ogg | – | 3.5+ | † | 5.0+ | 10.5+ | – | – | |
| H.264+AAC+MP4 | 9.0+* | – | 3.0+ | – | – | 3.0+ | 2.0+ | |
| WebM | 9.0+ | 4.0+ | † | 6.0+ | 10.6+ | – | 2.3± | |
* Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec,” which implies that Microsoft will not be shipping the codec themselves.
† Safari will play anything that QuickTime can play, but QuickTime only comes with H.264/AAC/MP4 support pre-installed.
± Although Android 2.3 supports WebM, there are no hardware decoders yet, so battery life is a concern.
To support all the browsers you need to convert your video files to the following three formats.
- H.264 Video (MP4) can be encoded with Handbrake handbrake.fr which is available in graphical and command-line versions. This application is open source and has general public licensing.
- Ogg Theora: There is various software to change videos to this open source format.
- For Mac users, there is evom. thelittleappfactory.com/evom/
- For Windows users, there is VLC www.videolan.org/vlc/
- For Linux users, there is VLC and Ogg Convert. oggconvert.tristanb.net
- Firefogg is helpful until you upgrade to Firefox4+ firefogg.org
- VP8/webM: Free Online WebM video.online-convert.com/convert-to-webm or Free WebM Encoder 1.2, webmsoft.com/free-webm-encoder.html can be downloaded to convert files to the webM format.
To create all the files required for HTML5 video tag to function with cross browser compatibility, the following converter proves most useful.
www.mirovideoconverter.com
Video JS enables video embedding into any post or page via HTML5. This is one of the most customary video players available. Additionally, the Video JS team have created a WordPress plug-in that makes the installation process effortless. This Website Plug-in provides Flash fallback support for non-HTML5 browsers. View link to download: videojs.com
Although, HTML5 Video is the future for video play on the web, there are also technical issues that have arisen as a by-product. One example is a bug in iPhone and iPads, however it can be overcome with an upgrade to iOS 4.0. Another matter, is the licensing laws behind H.264 that prevents long-term free usage, yet is available on a gratuitous five year rotational cycle. http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC#Patent_licensing
As HTML5’s draft specification for the video element is still evolving, the implementation of it has not been standardised. Having three different video formats instead of a universal one, increases developers workloads and is subsequently less cost effective. Each browser has taken its own approach to promote their preferred format. Hence, HTML5 Video may have improved online video viewing without third party plug-ins, however the coding time for the multiple browser formats has complicated a process, that was meant to be simplified.
Article written by
