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.
Example
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>
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.
SUNWEB EXPERT