HTML 5 TutorialHTML 5 Tutorial

Chapter 3Chapter 3VideoVideo

VideoVideo• 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)

FormatFormat• 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 SyntaxBasic SyntaxBasic 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 SyntaxBasic SyntaxExample :

<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 SyntaxBasic 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>

AttributeAttribute• 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

ReferenceReference

1. Hickson, I. (Eds.). (2011). HTML Living Standar. Retrieved from http://www.whatwg.org/specs/web-apps/current-work/multipage/

2. World Wide Web Consortium. (n.d.). HTML 5 Tutorial. Retrieved from http://www.w3schools.com/html5/default.asp