Sunny Books
What we have

HTML5 video

HTML5 new features include video playing support to the website via audio element, this makes embedding video file very easy as we don't need plugins (flash) any more. This new feature will also be the new standard of playing video files.


The following example shows the basic application of video tag.

<video width="640" height="360" controls poster="poster.jpg">
    <source src="sample.mp4" type="video/mp4">
    <source src="sample.ogg" type="video/ogg">
    <source src="sample.webm" type="video/webm">

Video Formats and Browser Support

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Browser MP4 WebM Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES

Video Attribute Specification:

The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control:

Attribute Description
autoplay This boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
autobuffer This boolean attribute if specified, the video will automatically begin buffering even if it's not set to automatically play.
controls If this attribute is present, it will allow the user to control video playback, including volume, seeking, and pause/resume playback.
height This attribut specifies the height of the video's display area, in CSS pixels.
loop This boolean attribute if specified, will allow video automatically seek back to the start after reaching at the end.
preload This attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present.
poster This is a URL of an image to show until the user plays or seeks.
src The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed
width This attribut specifies the width of the video's display area, in CSS pixels.

Note: don't use poster and autoplay at the same time because when the video is set autoplay, the poster just falsh very quickly, that does not make sense.