Adding HTML5 Video

To play video on your web page. Add the video element, with the src attribute referencing the file location of your video file and fallback content for older browsers.
<video src="video.ogv"></video>
preload attribute (Preloading the Video)
The preload attribute suggest to the browser whether and how it should download the video.

The preload attribute accepts one of three values

autoauto indicates that the video and its associated metadata will start loading before the video is played.
nonenone indicates that the video shouldn’t load in the background before the user presses play.
metadataThis works like none, except that any metadata associated with the video (for example, its dimensions, duration, and the like) can be preloaded, even though the video itself won’t be.

<video src="video.ogv" controls preload></video>

You can skip the attribute and let the browser decide or give browsers a “hint” with specific values:
preload="auto" or, simply, preload

controls attribute
Add 'controls' attribute if you want browsers to display a default control interface for your video.

controls is a Boolean attribute, so no value is required. When the controls attribute is added to the video element, it tells the browser to make the controls visible and accessible to the user.
Each browser is responsible for the look of the built-in video controls. So these controls differ in appearance from browser to browser.

<video src="example.webm" width="375" height="280" controls></video>

poster Attribute (Placing a Image Placeholder)
When you view a video on the Web, normally a single frame of the video will display in order to provide a teaser(a frame of video) of its content. poster attribute makes easier to show the teaser.

The poster attribute points to an image that the browser will use while the video is downloading, or until the user tells the video to play. (This attribute is not applicable to <audio>.)

If we don’t use the poster attribute, the browser shows the first frame of the movie

<video src="example.webm" width="375" height="280" poster="teaser.jpg" controls></video>

audio Attribute
The audio attribute controls the default state of the audio track for the video element. This attribute has a value of muted.

Adding the muted vale will cause the video’s audio track to default to muted. It is only the default state. Interacting with the controls or javascript can change this.

<video src="example.webm" width="375" height="280" poster="teaser.jpg" audio="muted"></video>

autoplay Attribute
autoplay is Boolean attribute which tells the browser to start playing the video as soon as the page loads.

<video src="example.webm" width="375" height="280" controls autoplay>

loop attribute
loop is Boolean attribute which tells the browser to loop the video when playing forwards.

<video controls width="640" height="360" loop>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" /> Your device does not support HTML5 video.

Video Codecs

.mp4The container format for the proprietary H.264 codec that encodes video for a full range of devices, including high definition.
.ogvThe free, open source container format for the open source Theora codec. Results in lower quality than H.264.
.webmAnother open source container format, which is used by the new, royalty-free VP8 codec from Google.

Integrating Multiple Sources
HTML5 enable us to declare multiple video files in your HTML5 video. To include multiple video formats, add the source elements the video element so that
every user agent to displays the video using the format of its choice.

When providing the source elements, there’s no need to specify a src for your video.

<video controls>
<source src="video.mp4" />
<source src="video.ogv" /> Your device does not support HTML5 video.
It is good practice to also specify the MIME type for your video files.
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
Since file formats are simply containers for different codecs, specify the compression used as below.
<source src="video.ogv" type="video/ogg; codecs='theora'">
The MIME type speeds up rendering of the video since it indicates what kind of content the browser is utilizing without the browser having to download a portion to make its own determination.

Here are some examples of MIME types with codecs:
type="video/ogg; codecs='theora, vorbis'"
type="video/mp4; codecs='avc1.42E01E'"
type="video/webm; codecs='vp8, vorbis'"

Even if we declare the MIME types with the proper codec in your HTML, there will be challenges related to the MIME types supported by the server where the server isn’t configured to support the MIME types your video, there will be playback issues.

source order
Consider the example of the below source elements. Ensure the source order which appears first support the latest version of browser.
<source src="example.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="example.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="example.ogv" type='video/ogg; codecs="theora, vorbis"'>

MP4/H.264/AAC container/codecEnsure that the video will play on the iPad. It’s necessary to include the MP4/H.264 file first to ensure compatibility. It is recognized by IE9, Safari, and older versions of Chrome
theWebM/VP8/Vorbis container/codecSupported by later versions of Chrome that will eventually drop support for H.264. WebM video will also play in Firefox 4 and Opera 10.6
Ogg/Theora/Vorbis container/codecSupported by Firefox 3.5 and Opera 10.5. Although other browsers also support this combination, they’ll be using the other formats since they appear ahead of this one in the source order.

Creating Fallback Content
Fallback simply means that if a users browser doesn’t support HTML5 video, it instead displays the fallback content. For these users you could include fallback Flash.

<video src="video.ogv" controls>
Your device does not support HTML5 video.
<a href="video.ogg">Download the Learning to Love HTML5 introductory</a>

You could also include a download link for audio as a fallback content and also nest fallback content for lack of support for both the object and video elements.

<video src="video.ogv" controls>
<object type="application/x-shockwave-flash" data="player.swf?file=" video.mp4 ">

<param name="movie " value="player.swf?file="video.mp4">
<a href="video.mp4">Download the Learning to Love HTML5

introductory video</a>
Related Tutorial
Follow Us #