Summary -
In this topic, we described about the below sections -
Why Video tag required?
Earlier videos could be only played on webpages using web plugins like Flash player etc. Since the release of HTML5, the video element can be used to add video content to a web page.
What is Video Tag?
HTML5 launched the video element of the objective of playing videos, partially changing the object element. HTML5 video is planned by its inventors to become the new standard path to display video on the web, instead of the previous standard of using the adobe flash plugin, <Video> tag was presented in HTML 5 (formally, described to as HTML5 - with no space).
HTML5 video is currently extensively implemented in the main browsers and it has backing from main websites such as YouTube. The video and audio elements both follow the same basic syntax. In its most standard form, all we want to do is, use the src element to add the controls attribute and recognize the video URL. So that our website visitors can control video playback. We can use the height and width attributes to fix the size of the video player, but this is not mandatory.
Advantages -
There are two massive benefits of using the video tag -
- Hardware acceleration - Performing a video in a hardware accelerated browser uses substantially less CPU power when compared to the usage in a new browser.
- Plug-in free - We don’t have to worry about downloading the correct plug-in or the difficulties playing as the audio is plug-in free.
Playing videos on Webpage
Earlier HTML5, a video will be played only in a browser with a flash player(like plug-in). The HTML5 <video> element identifies a basic path to insert a video in a web page.
<video> element
HTML5 video is used to display the video on an HTML document. For example, we could insert a music video on web page for our visitors to listen to and watch. HTML5 <video> tag recognizes attributes that indicate how the video should be played.
HTML5 <video> tag allows attributes that identify how the video should be played. Attributes consist of loop, autoplay, preload, and additional. The text between the opening and closing video tags(<video> and </video>)will only be shown in browsers that do not backing the <video> element.
Example -
Below example display a video in html, using <video> element.
<!DOCTYPE html>
<html>
<body>
<video width="420" height="340" controls>
<source src="video/new.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Output-
How it works?
Control attributes adds video controls, like volume, play, and pause. It is always suggestable to include height and width attributes. If width and height are not specified, the page might blink while the video loads.
The <source> element accepts you to code multiple video files in a single video tag that the browser may select from and the browser will use the first supported format among the list of available files. The text between the opening and closing video tags(<video> and </video>)will only be shown in browsers that do not backing the <video> element.
The following table display the attributes that are specific to the <audio> tag -
| Attribute | Value | Description |
|---|---|---|
| autoplay | autoplay | This Boolean attribute describes that the video will spontaneously start playing as shortly as possible after loading without pausing to finish loading the page data. |
| controls | controls | If specified, the browsers show controls like video playback, like volume, pause, play, etc to the user and accepts the user actions to control video. |
| loop | loop | This Boolean attribute describes that the next/current video spontaneously start over again after reaching the end of current video. |
| muted | muted | The Boolean attribute indicates the video initially muted. The default value is false, means the video will be played with sound by default if not specified. |
| preload | auto metadata none | Specifies a hint to the browser about when to download of the video itself or its metadata. The autoplay attribute can take over this attribute, as if you want to automatically play a video, the browser will definitely need to download it afront. |
| src | URL | Describes the source of the video file. Instead, we can use the preferred <source> tag as it accepts for multiple options. |
| Height | pixels | Sets the display area height. |
| Width | Pixels | Sets the display area width. |
<video> autoplay
This Boolean attribute describes that the video will spontaneously start playing as shortly as possible after loading without pausing to complete loading the data.
Example -
The following example describes about autoplaying video.
<!DOCTYPE html>
<html>
<body>
<video width="420" height="340" autoplay>
<source src="video/new.mp4" type="video/mp4">
<source src="video/new.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p><b>Note:</b>on some mobile devices the autoplay
attribute does not work. </p>
</body>
</html>
Output -
Adding muted video file on a Webpage
The Boolean attribute muted indicates the video initially muted. The default value is false, means the video will be played with sound.
Example -
<!DOCTYPE html>
<html>
<body>
<video controls muted>
<source src="video/new.mp4" type="video/mp4">
<source src="video/new.ogg" type="video/ogg">
</video>
</body>
</html>
Output -
Adding video using the source element
src describes the source of the video file. Instead of src, we can use the preferred <source> tag as it accepts for multiple options.
Example: -
The following example describes video source element.
<!DOCTYPE html>
<html>
<body>
<video controls autoplay>
<source src="video/new.mp4" type="video/mp4">
</video>
</body>
</html>
Output -
Adding video with multiple sources
Videos from multiple sources can specified to the browser. If the browser is unable to perform the initial source, then it spontaneously jump to the second source and try to perform it.
Example: -
The following example describes video from multiple sources.
<!DOCTYPE html>
<html>
<body>
<video controls autoplay>
<source src="video/new.mp4" type="video/mp4">
<source src="video/new.ogg" type="video/ogg">
</video>
</body>
</html>
Output -
HTML5 Video Supported Media Types
The following table describes the HTML5 video tag supported media types -
| File Format | Media Type |
|---|---|
| MP4 | mp4/video |
| WebM | webm/video |
| Ogg | ogg/video |
Global attribute and event attribute
Like all other tags, <video> tag supports both global and event attribute.
Methods, properties, and events
HTML5 classifies DOM properties, events, and methods for the <video> element.
This accepts you to pause videos, play, and load as well as volume and setting the time duration
DOM events that can advise you when a video starts to play, is stopped, etc.
Audio/Video Methods
| Method | Description |
|---|---|
| addTextTrack() | Adds a fresh text track to the video or audio. |
| canPlayType() | Tests if the browser can play the specific audio or video type. |
| load() | Re-loads the video or audio element. |
| play() | Begins playing the video or audio. |
| pause() | Pauses the presently performing audio or video. |
Audio/Video Properties
| Property | Description |
|---|---|
| audioTracks | Returns or sets an AudioTrackList object representing accessible audio tracks. |
| autoplay | Returns or sets whether the audio or video should begin playing as quickly as it is loaded. |
| buffered | Returns a TimeRanges object representing the buffered parts of the audio or video. |
| controller | Returns the MediaController object representing the existing media controller of the audio or video. |
| controls | Returns or sets whether the video or audio should exhibit controls like pause or play etc. |
| crossOrigin | Returns or sets the CORS settings of the video or audio. |
| currentSrc | Returns the URL of the existing video or audio. |
| currentTime | Returns or sets the existing playback spot in the video or audio(in seconds). |
| defaultMuted | Returns or sets whether the video or audio should be muted by default. |
| defaultPlaybackRate | Returns or sets the default pace of the video or audio playback. |
| duration | Returns the duration of the existing video or audio (in seconds). |
| ended | Returns whether the playback of the video or audio has ended or not. |
| error | Returns a MediaError object representing the error state of the video or audio. |
| loop | Returns or sets whether the video or audio should begin over again when completed. |
| mediaGroup | Returns or sets the group the video or audio belongs to (utilized to link numerous audios or video elements). |
| muted | Returns or sets whether the video or audio is muted or not. |
| networkState | Returns the existing network state of the video or audio. |
| paused | Returns whether the video or audio is paused or not. |
| playbackRate | Returns or sets the pace of the video or audio playback. |
| played | Returns a TimeRanges object representing the played sections of the video or audio. |
| preload | Returns or sets whether the video or audio should be loaded when the page loads. |
| readyState | Returns the existing ready state of the video or audio. |
| seekable | Returns a TimeRanges object representing the seek able sections of the video or audio. |
| seeking | Returns whether the client is presently seeking in the video or audio. |
| src | Returns or sets the existing source of the video or audio element. |
| startDate | Returns a Date object representing the existing time offset. |
| textTracks | Returns a TextTrackList object representing the accessible text tracks. |
| videoTracks | Returns a VideoTrackList object representing the accessible video tracks. |
| volume | Returns or sets the volume of the video or audio. |
HTML Audio/Video Events
| Event | Description |
|---|---|
| abort | Triggers when the loading of a video or audio is aborted. |
| canplay | Triggers when the browser can begin performing the video or audio. |
| canplaythrough | Triggers when the browser can play through the video or audio without blocking for buffering. |
| durationchange | Triggers when the duration of the video or audio is altered. |
| emptied | Triggers when the present playlist is unoccupied. |
| ended | Triggers when the present playlist is ended |
| error | Triggers when an error happened during the loading of a video or audio. |
| loadeddata | Triggers when the browser has loaded the existing frame of the video or audio. |
| loadedmetadata | Triggers when the browser has loaded meta data for the video or audio. |
| loadstart | Triggers when the browser begins exploring for the video or audio. |
| pause | Triggers when the video or audio has been paused |
| play | Triggers when the video or audio has been beginning or is no lengthier stopped. |
| playing | Triggers when the video or audio is playing after having been stopped or paused for buffering. |
| progress | Triggers when the browser is downloading the video or audio. |
| ratechange | Triggers when the performing speed of the video or audio is changed. |
| seeked | Triggers when the client is completed skipping or moving to a new spot in the video or audio. |
| seeking | Triggers when the client begins skipping or moving to a new spot in the video or audio. |
| stalled | Triggers when the browser is attempting to get media information, but information is not accessible. |
| suspend | Triggers when the browser is deliberately not getting media information. |
| timeupdate | Triggers when the existing playback position has altered. |
| volumechange | Triggers when the volume has been changed. |
| waiting | Triggers when the video ends because it wants to buffer the next frame. |
Video - Browser Support for formats
There are three supported video formats in HTML5, like Ogg, WebM, and Mp4.
The individual browser support for the various formats is -
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | Yes | No | No |
| Chrome | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes |
| Safari | Yes | No | No |
| Opera | Yes (from Opera 25) | Yes | Yes |
Supported Browser Versions for Video tag
The following browsers with versions in the table indicates the initial browser version that completely supports the <video> element.
| Element | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <video> | 4.0 and above | 9.0 and above | 3.5 and above | 4.0 and above | 10.5 and above |
HTML5 Video Related Tags
| Tag | Description |
|---|---|
| <video> | Defines a movie or video |
| <source> | classifies multiple media resources for media elements, such as <audio> and <video> |
| <track> | classifies text tracks in media players |