Many modern websites shows videos. HTML5 provides a standard for showing them.
Video on the Web
Until now, there has never been a standard for showing video on a web page.
Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins.
HTML5 specifies a standard way to include video, with the video element.
Video Formats
Currently, there are 3 supported video formats for the video element:
| Format | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | No | No | No | 5.0+ | 3.0+ |
| WebM | No | No | 10.6+ | 6.0+ | No |
- Ogg = Ogg files with Theora video codec and Vorbis audio codec
- MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
- WebM = WebM files with VP8 video codec and Vorbis audio codec
How It Works
To show a video in HTML5, this is all you need:
| <video src="movie.ogg" controls="controls"> </video> |
The control attribute is for adding play, pause, and volume controls.
It is also always a good idea to include the width and height attributes.
Insert content between the <video> and </video> tags for browsers that do not support the video element:
Example
Try it yourself » |
The example above uses an Ogg file, and will work in Firefox, Opera and Chrome.
To make the video work in Safari and future versions of Chrome, we must add a MPEG4 and WebM file.
The video element allows multiple source elements. Source elements can link to different video files. The browser will use the first recognized format:
Example
Try it yourself » |
Internet Explorer
Internet Explorer 8 does not support the video element. In IE 9, there will be support for video element using MPEG4.
All <video> Attributes
| Attribute | Value | Description |
|---|---|---|
| audio | muted | Defining the default state of the the audio. Currently, only "muted" is allowed |
| autoplay | autoplay | If present, then the video will start playing as soon as it is ready |
| controls | controls | If present, controls will be displayed, such as a play button |
| height | pixels | Sets the height of the video player |
| loop | loop | If present, the video will start over again, every time it is finished |
| poster | url | Specifies the URL of an image representing the video |
| preload | preload | If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present |
| src | url | The URL of the video to play |
| width | pixels | Sets the width of the video player |
No comments:
Post a Comment