Transcript Chapter 3. Video

HTML 5 Tutorial
Chapter 3
Video
Video
• HTML 5.0 provides a standard for showing video.
Using the <video> element we can easily embed video
within our web page.
• The video formats the <video> element supports
include the following :
• MPG4 (with H.264 video codec and AAC audio
codec)
• OGG (with Thedora video codec and Vorbis audio
codec)
Format
• 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.
• Currently, there are 2 supported video formats for the video
element:
Format
Firefox 3.5
Opera 10.5
Chrome 3.0
IE 8
Safari 3.0
Ogg
Yes
Yes
Yes
No
No
MPEG 4
No
No
Yes
No
Yes
Basic Syntax
Basic Syntax to Embed Video :
<video src="movie.ogg" controls="controls">
*Content we place in between the tags will be displayed when the
browser doesn't support displaying video
</video>
• We can use the width and height attributes in order
to specify the size
• The control attribute is for adding the play, pause
and volume controls
Basic Syntax
Example :
<h1>HTML 5 Playing Video Sample</h1>
<video
src="http://example.com/video/example_video.ogg"
controls="controls"
width=“600"
height=“280">
Browser does not support HTML 5.0
</video>
Basic Syntax
• The video element allows multiple source elements.
Source elements can link to different video files. The
browser will use the first recognized format :
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
Attribute
• The HTML 5.0 supports the following 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
Reference
1. Hickson, I. (Eds.). (2011). HTML Living Standar.
Retrieved from http://www.whatwg.org/specs/webapps/current-work/multipage/
2. World Wide Web Consortium. (n.d.). HTML 5
Tutorial. Retrieved from
http://www.w3schools.com/html5/default.asp