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:
How It Works
|
Format
|
IE
|
Firefox
|
Opera
|
Chrome
|
Safari
|
|
Ogg
|
No
|
3.5+
|
10.5+
|
5.0+
|
No
|
|
MPEG 4
|
9.0+
|
No
|
No
|
5.0+
|
3.0+
|
|
WebM
|
No
|
4.0+
|
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
To show a video in HTML5, this is all you need:
|
<video src="movie.ogg"
controls="controls"></video>
|
The control attribute is for adding controls: play, pause, and
volume.
It is also a good idea to always include width and height
attributes.
You should also insert text content between the <video> and
</video> tags for browsers that do not support the video element:
|
Example
|
The example above uses an Ogg file, and will work in Firefox,
Opera and Chrome.
To play the video in Internet Explorer, Safari and Chrome, we must
add an MPEG4 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
|
HTML5 video Tags
|
Tag
|
Description
|
|
Defines a video or movie
|
|
|
Defines multiple media resources for media elements, such as
<video> and <audio>
|
|
|
Defines text tracks used in mediaplayers
|
0 comments:
Post a Comment