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.
The preload attribute suggest to the browser whether and how it should download the video.

The preload attribute accepts one of three values

Value	Description
auto	auto indicates that the video and its associated metadata will start loading before the video is played.
none	none indicates that the video shouldn’t load in the background before the user presses play.
metadata	This 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.

You can skip the attribute and let the browser decide or give browsers a “hint” with specific values:

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.


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


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.


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


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

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

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.

It is good practice to also specify the MIME type for your video files.
Since file formats are simply containers for different codecs, specify the compression used as below.
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:

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.

Consider the example of the below source elements. Ensure the source order which appears first support the latest version of browser.

Codec	Description
MP4/H.264/AAC container/codec	Ensure 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/codec	Supported 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/codec	Supported 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.

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.


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.