{ LearnWebSiteDesign.com }

HTML, HTML5, XHTML, CSS and CSS3 Tutorials

HTML5 Video Tutorial

HTML5 is a standard way to include video in web pages. This is done with the HTML5 <video> element. The HTML5 <video> element is not supported in all web browsers.

Before HTML5, there was no standard way to include video in web pages. To include video in web pages you had to use a third-party plugin, for example, RealPlayer, QuickTime or Flash. Not all web browsers have the same plugins. If a web browser does not support the HTML5 <video> element, there are fallbacks that allowed the video to still be showed.

HTML5 Video Formats
HTML5 Video Formats and Browser Compatibility
Syntax to Embed HTML5 Videos
Multiple Video Sources

HTML5 <video> Attributes
Fall-back Option to Flash
ScreenCasting Software
Creating 3 Versions of Each Video

HTML5 Video Formats

There are 3 supported video formats for the <video> element. The table below lists each supported video format and which web browser currently support it.

Video Format	Description
OGG	Ogg video formats usually have a .ogv extension. Ogg is a free software / open source audio format specification codec.
MPEG 4	MPEG 4 video formats usually have an .mp4 or .m4v extension.
WebM	WebM is an audio-video format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video. WebM usually has a .f4a or .f4b extension.

HTML5 Video Formats and Web Browser Compatibility

The HTML5 video formats and the web browsers that support the video formats are listed below.

Video Format	IE	Firefox	Chrome	Safari	Opera
Ogg	No	3.5+	5.0+	No	10.5+
MPEG 4	No	No	5.0+	3.0+	No
WebM	No	No	5.0+	No	10.6+

Syntax to Embed HTML5 Videos.

The basic syntax to embed HTML5 videos is shown below. The HTML5 <video> element is used to embed videos in web pages.

Multiple Video Sources

The HTML5 <video> element allows multiple source elements. This is done by nesting the <source> element within the <video> element.

The web browser will use the first recognized video format.

The code below shows you how to include multiple video source elements.

HTML5 <video> Attributes

The controls attribute is for adds play, pause, and volume controls.

The HTML5 <video> element also allows for height and width attributes.

The table below lists the <video> attributes, values and descriptions.

Attribute	Value	Description
audio	muted	Defines the default state of the audio. Currently, the only value allowed is "muted".
autoplay	autoplay	If included, the video will start playing as soon as it loads.
controls	controls	If included, play, pause and volume controls are added.
height	pixels	If included, it sets the height of the video player.
loop	loop	If included, the video will begin playing again, every time it is done playing.
poster	url	The poster attribute specifies the url of an image that can be shown while no video is being played or available.
preload	preload none	If included, the preload attribute tells the browser to download the video file as the page loads so that it will be ready to run. The preload attribute is ignored if the autoplay attribute is present.
src	url	The URL of the video to be played.
width	pixels	If included, it sets the width of the video player.

Fall-back Option to Flash

Up to Internet Explorer 8, the HTML5 <video> element is not supported. Ineternet Explorer 9 will support the MPEG 4 video format.

To have maximum compatibility so that your videos are shown on every web browser, you should include multiple source elements with a fall-back option to Flash-based video player.

The web browser will use the first recognized video format.

The code below shows you how to include multiple video source elements including a fall-back option for Flash videos.

NOTE: There are many ways to include video in your web pages. This is simply one way to include video using the HTML5 <video> element with a fall-back option to a Flash video.

NOTE: At the moment, the WebM video format is not necessary since the OGG video format is also supported by both Chrome and Opera.

NOTE: You will have to make three seperate versions of your video so that your video will play on all web browsers (OGG, MPEG 4 and Flash).

NOTE: Do Not any one of these video formats. If the <src> element for the Safari web browser is not included, Safari will display an empty video player screen.

Screencasting Software

You can use screencasting software to create videos. Some of the software is free, open-source, offers free trial versions, etc.

One of the free software is CamStudio.org. Another screencasting tool that I highly recommend is Camtasia (http://www.techsmith.com/camtasia/). They offer a free 30 day trial version.

There are many more screencasting software and tools that are available.

Creating 3 Versions of the Video

You will need to create three versions of your video. This is so that there will be at least one video format that is compatible with each web browser.

Convert Videos to OGG Video Formats

The first thing that you should do is convert your video(s) to the OGG video format. Some tools that you can use are located at VideoLAN.org/vlc/ and Online-Convert.com.

Converting Videos to MPEG 4 Video Formats

Many screencasting tools will automatically export your videos to MPEG 4 format if you want.

There are also many screencasting tools that can be used to export videos to an MPEG video format. Some of these are mp4Converter.net/mp4-converter-win.html and Online-Convert.com.

Converting Videos to a Flash Format

You should also make a Flash video version in the case that the web browser does not support the HTML5 <video> element at all.

One such tool that you can use to convert videos to a Flash video format is DVDVideoSoft.com.

Home

Tutorials

Templates

Free Website Templates

References

CSS References