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.
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.
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.
Get in touch with us today!
We care about your success as much as you do!