- HTML Introduction
- HTML Attributes
- HTML Basic Tag
- HTML Color
- HTML Comments
- HTML Fonts
- HTML Blocks
- HTML Images
- HTML Layout
- HTML Links
- HTML Lists
- HTML Formatting Tags
- HTML Table
- HTML Meta Tag
- HTML Frames
- HTML Parse Tag
- HTML Forms
- HTML Script
- HTML Style-CSS
- HTML XHTML
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.
<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.
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:
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4
- 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.
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
|<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:
|autoplay||This attribute if set will automatically begin to play back video as soon as it can do so without stopping to finish loading the data.|
|autobuffer||This attribute if set will automatically begin buffering video even if it's not set to autoplay.|
|controls||This attribute if set will allow the user to control video playback, including volume, seeking, and pause/resume playback.|
|height||This attribute defines height of the video's display area, in CSS pixels.|
|loop||This attribute if set will allow video to automatically seek back to the start after reaching at the end.|
|preload||This attribute if set will load video at page load, and make it ready to run. Ignored if autoplay is present.|
|poster||Default URL of image to show until the user plays or seeks.|
|src||Video embedded url. This is optional attribute and you may instead use the <source> element within the video block to specify the video to embed|
|width||This attribute defines the width of the video's display area, in CSS pixels.|