Video tag in HTML 5
The video tag displays a video from a container file, which can also include sound. It is a powerful element with attributes to define the way it works and appearance.
But currently it does not allow full screen and does not offer all the features of the Flash reader.
Tag and attributes
The video tag is recognized by Firefox, Chrome, Safari, IE9 or IE with the Google chrome frame plugin.
<video src="theurl" width="600" height="400" />
Or with the source tag:
A custom control panel can be added with a layer:
<div class="video"> <video></video> <div class="panel"></div> </div>
The URL of the video container.
The dimensions of the image.
The URL of an image to display instead of the video until it is available. We can use a frame from the video.
Is true or false, the true value triggers the loading of video into memory along with the page, an option choosen when it is supposed the video to be always displayed.
Is true or false, the true value starts the video when the page loads.
Is true or false, the true value display the video in a loop.
Is true or false, the true value indicates that the control bar appears by default, otherwise the site sets its own bar.
The page must switch to the Flash reader when the browser does not support HTML 5.
To do this you can place the code of the Flash player in the content of the tag: This code is ignored on recent browser is contrary to the oldest, it is the start tags
<video> and closing tag </video>, which are ignored. As the <source> tag.
<source src="myvideo.ogg" type="video/ogg"/>
<source src="myvideo.mp4" type="video/mp4"/>
Compatibility with any browser may also be added by the code provided by html5media.
You can download the MIT licensed scripts and put the code on your site to not depend on an external website.
Codecs and container files
A codec is the algorithm for COmpressing and DECompressing a video (or COding and DECoding).
The HTML 5 specification does not provide specific video codec due to lack of agreement on which technology to use. But browsers recognize different codecs:
- VP8 from Google. Open source it is in the same line as H.264.
- MPEG 4 is a standard with different implementations. Among these, Xvid is open source but this does not preclude the existence of patents on the codec.
- H.264 is a version of MPEG 4 for limited devices and provides high compression for reduced quality. It is used by Youtube for HD and Blu-Ray.
Mozilla does not want to buy a $5 millions annual license to this format of which Apple and Microsoft are licensors but support this format when the codec is installed on the computer.
- Theora is free and open source. It does not support hardware acceleration like H.264.
- Opus. Royalty-free codec to replace H.264.
- Dalaa. Codec being defined by Xiph and Mozilla to be superior to H.265 and therefore much more efficient than H.264. Totally royalty-free like Opus and Theora.
The following types of containers for the video file can be used:
- WebM with the VP8 codec.
- MPEG 4 with the .mp4 extension.
- Ogg with the .ogg extension, for Theora.
- AVI with the .avi extension.
- Flash video with the .flv extension.
- Codecs for the video tag.
Ogg, WebM, H.264, useful tools to use them in a browser.
- Seriously. You wonder how the filmmakers are able to transpose characters in fantastic scenery. This is the technique of green background, you can use it yourself in HTML 5 and Node.js with this code.
- Sublime video reader. Works with Chrome 4, shows some advantages over Flash: you can go immediately to any part of the video.
- Rainbow. A Firefox plugin to make audio or video recording from the browser.
References and more
- HTML 5 video. Specification by the W3C.
- Brief history of video compression. Describes the evolution of techniques in the field of video compression.
- State of the video. Video support by browsers in January 2012.