HTML5 Video ElementThe HTML5 specification introduces the <video> tag to enable the playing of video content on a web page. In previous versions of HTML, developers and designers would setup the pages to play video (and audio) by embedding the file on the web page inside a widely used container format such as Adobe Flash. YouTube is a good example. Since most browsers would have the Adobe Flash player installed, there should not have problem playing the file. If not they can easily download the plug-in to add support of that video file to their browser. Alternatively, you can link the video file to an external application such as Windows Media Player such that it plays when your visitors click on the link. Before diving into the <video> element, there is something that we must know about video file format (and audio file format since it invariably comes with video) and encoding. A video file is stored within a container in a pre-defined format. When we talk about video format we are usually talking about the container format. Common examples are Flash video (.flv or .f4v), Audio Video Interleave (.avi), MPEG-4 (.mp4), Ogg (.ogv) and Matroska (.mkv). There is also a new format called WebM which is supported by Google. Raw uncompressed video is much too big to be useful on the web. Therefore in addition to the container format, the video file needs to be encoded to bring it down to size without losing too much on quality. You need to decide on the format to encode the file. The browser should also have a built in support to decode the file. Otherwise you have a download and install a suitable plug-in as in the Flash example above to play the file. Just as there are many container formats, there are also many video encoding formats. The most popular ones include H.264, DivX, Theora, VP8 etc. The popular audio formats to go with video include MP3 and AAC and Vorbis. At the time of writing, modern browsers differ in their support for video container formats and encoding formats. For example, Safari supports H.264 video and AAC audio in an MP4 container while Firefox 3.5+ supports the Ogg container format (with Theora video and Vorbis audio codec) and WebM container format (with VP8 video and Vorbis audio codec). The most common container format, video and audio codec combos are:-
There are several software packages that you can use to convert between formats. I personally use VLC that you can download for free at www.videolan.org. Inserting a video on a web page is quite straightforward. Here is an example. <video width=”640” height=”480” controls> The <video> supports several attributes including “controls”, “autoplay”, “loop”, “width”, “height” and “preload”. In the above example the width and height of the video is set to 640 x 480 pixels and controls are enabled. Source points to the three popular formats so that visitors can view them regardless of the browsers (modern ones only) that they are using. It also means that you need to prepare your video file in three different formats to ensure that most of your visitors get to view the video. The “autoplay” attribute when set to “true” tells the browser to play the video when the page is loaded while “loop” tells the browser to reply the video immediate after it reaches the end. The “preload” attribute tells the browser to immediate download the video when it detects this element. Visitors will wait less as the video file is already been downloaded together with the web page. What if your visitor’s browser does not support any of the video formats? There is always Adobe Flash. You can tell the browser to play the video via Flash by inserting this piece of HTML just before the closing </video> tag. <embed src="myvideo.mp4" type="application/x-shockwave-flash" width="640" height="480" allowscriptaccess="always" allowfullscreen="true"> Related |
|||||||||||||
|
|
|||||||||||||