Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML5 Video

Before HTML5 media tags, there was no protocol for video content.

Plugins like flash were used to play these files.

HTML5 uses the <video> element to embed video and movie.


<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>

The control attribute provides video controls, like volume, play and pause.

It is a good practice to provide height and width to occupy space for the same.

You should also default text content between the <video> and <video> tags for browsers that do not support the <video> element.

The <video> element supports multiple <source> elements. <source> elements can be tagged to different video files. The browser will use the first recognized format.

Video Formats and Browser Support

Currently there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4
YES YES
Safari YES NO NO
Opera NO YES YES
  • MP4 = MPEG 4 files with H264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec
HTML5 <video> - DOM Methods and Properties

HTML5 provides DOM methods, properties, and events for the <video> and <audio> elements.

These properties,methods and events allow you to manipulate <video> and <audio> elements using JavaScript.

There are methods for pausing,playing and loading and there are properties (like duration and volume). There are DOM events that can notify you when the <video> element begins to play, is paused, is ended.

Below example illustrate how to address a <video> element, read and set properties, and call methods.

HTML5 Video Tags
Tag Description
<video> Defines a video or movie
<source> Provides multiple media resources for media elements, such as <video> and <audio>
<track> Text tracks in media players
Video Attribute Specification:

The HTML5 video tag has a number of attributes to control the look and feel and various functionalities of the control:

AttributeDescription
autoplayThis attribute if set will automatically begin to play back video as soon as it can do so without stopping to finish loading the data.
autobufferThis attribute if set will automatically begin buffering video even if it's not set to autoplay.
controlsThis attribute if set will allow the user to control video playback, including volume, seeking, and pause/resume playback.
heightThis attribute defines height of the video's display area, in CSS pixels.
loopThis attribute if set will allow video to automatically seek back to the start after reaching at the end.
preloadThis attribute if set will load video at page load, and make it ready to run. Ignored if autoplay is present.
posterDefault URL of image to show until the user plays or seeks.
srcVideo embedded url. This is optional attribute and you may instead use the <source> element within the video block to specify the video to embed
widthThis attribute defines the width of the video's display area, in CSS pixels.


Related Videos