HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML5 Video

Run code

Before HTML5, a video could only be played in a browser with a plug-in like flash.

The HTML5 specification introduced the video element for the purpose of playing videos.

The HTML5 <video> element embeds a media player which supports video playback into the document.


HTML <video> Element

The <video> element is used to embed video player in web pages.

Run code

The controls attribute allow the user to control video playback, including volume, seeking, and pause/resume playback.

The <source> element specifies alternative media resources for the video. The browser will use the first recognized format.

Any text between <video> and </video> will be displayed in browsers that do not support the <video> tag.



HTML Video - The autoplay Attribute

The autoplay attribute specifies that the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.

Run code

HTML Video - The poster Attribute

The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button.

If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

Run code

Responsive Video

A responsive video adjust itself to fit the size of the screen.

Use width:100% and height:auto to make a video responsive, the video will be scale up and down according to screen size:

Run code

HTML Video - Adding Subtitles

The <track> element is used for defining captions, subtitles, and other content for video element.

Run code

The src attribute specifies the URL of the track (.vtt file).

The srclang attribute specifies the language of the track text data (required if kind="subtitles").


HTML Video - Media Types

File Format Media Type
MP4 video/mp4
OGG video/ogg
WebM video/webm

HTML5 Video Attributes

Attributes Description
autoplay A boolean attribute specifies that the video automatically begins to play back as soon as it can do so without stopping to finish loading the data
controls This attribute adds video controls, like play, pause, and volume
loop A boolean attribute specifies that the browser will automatically seek back to the start upon reaching the end of the video/audio
muted A boolean attribute specifies that the audio output of the video should be muted
width The width of the video's display area
height The height of the video's display area
poster A URL indicating a poster frame to show until the user plays or seeks
preload This element can be used with the value none, metadata, or auto to tell the browser how much of the video file to preload. Note that if autoplay is applied to a video element it will override the preload attribute