HTML <video> Tag
The Video tag in HTML is used to play video on a media player on the web page. We can also insert an audio by the video tag, but audio tag is better for inserting an audio on web page.
Syntax of Video Tag:
<body>
<video controls >
<source src=" #"
Type =" # ">
……… ……….
</video>
</body>HTML:
<!DOCTYPE html >
<html>
<head>
<title>HTML video tag </title >
</head>
<body>
<video controls width="250" >
<source src=" https://youtu.be/Vw7kviWV07k "
type="">
<source src="https://youtu.be/WroRpyGTOiA "
type="">
Sorry for inconvinencebut your web browser doesn't support this kind of embedded videos.
</video >
</body >
</html>
Output:
A video clip or other movie streams can be included in a document by using the < video > element. This tag can contain one or more "source" tags from different video sources. The browser will use the first source for running videos.
Those browsers that do not support the video element will display the text instead of video. MP4, WebM, and OGG are the three video formats which are fully supported by Hyper Text Markup Language.
Attributes
This element is also compatible with the global attributes, just as all other HTML tags.
Autoplay:
When you have specified this attribute in video tag, then the video
automatically begins.
The process of autoplay will happen until the attribute is present in the
video tag in any form.
If you want to remove this option from the video, then you have to remove the
autoplay attribute completely from the html document.
Chrome 7.0 is a browser which only support this property with the presence of
muted attribute.s it is ready
Autopictureinpicture:
It is a Boolean attribute which gives two possible results:
1. True: If the value is true, the element should automatically enable picture-in-picture mode whenever you transition between two websites or other programs.
2. False: If it's false, the element shouldn't immediately transition to picture mode.
Controls:
With the use of this property, the user or anybody who is just visiting the website may be access thevarious following controls:
- Video Playing,
- Increasing or DecreasingVolume,
- Seeking, and
- Pause/Resume playback.
Controlslist:
This attribute can be used when you want to give an access of selected number of controls, By using this feature, you may aid the browser in deciding which controls should be displayed to users.
Nodownload, NoRemotePlayback, NoFullScreen, and other settings may also be shown to the user.
You may use the disablepictureinpicture property to turn off the Picture-In-Picture mode in the control.
Crossorigin:
If you want to use CORS (Cross-Origin Resource Sharing) to get the relevant video, then you can use the crossorigin property. The canvas element can reuse resources that have CORS enabled without introducing any changes. The following values are allowed for this attribute:
Anonymous:
When a cross-origin request is sent without a credential, it serves a purpose. In other words, we can say thatit transmits the origin.
Origin:
Origin is an HTTP header that doesn't need an X.509 certificate, any kind of cookie, or HTTP basic authentication. If the server does not set Access-Control-Allow-Origin, then it will not provide credentials to the origin site.
Access-Control-Allow-Origin:
It is a header for HTTP.
Disablepictureinpicture
This attribute is used for preventing the web browser from presenting the video in a Picture-in-Picture context.
disableremoteplayback
This Boolean value is used to prevent remote playback option from occurring on devices that are linked by wired connections like HDMI, DVI, etc. It can also prevent from the wireless technologies like Miracast, Chromecast, DLNA, AirPlay, etc.
You can use x-webkit-airplay="deny" with Safari as an exception. Since, this property only return absolute values to define the height of the display area of the video on the webpage.
loop
If this attribute is defined in the video tag, then the browser will automatically begin looping and seek back to the beginning point after reaching the conclusion point of the movie.
muted
The basic audio parameters of a movie may be set with the assistance of this Boolean property. If muted attribute has been specified, then the audio will be muted initially. If we discuss its default value, it is false, which indicates that the audio will only be played while the video is playing.
playsinline
It is a Boolean attribute that specifies whether the video should be played "inline," or inside the element's playing area. It should be noted that the absence of this feature does not ensure that the video will always be played in full-screen.
poster
A image will be displayed while the video downloads using the poster link. In the absence of this characteristic, nothing is displayed prior to the first frame becoming available, at which point the first frame is presented as the poster frame.
preload
Every browser has a different default setting. It is advised by the standard to set it to metadata. The priority of autoplay property is high than the preload.
We can apply only one of the following three values to this attribute at a time:
1. none: This value shows that preloading video is not advised.
2. Metadata: This value shows that just video metadata is obtained, such as length.
3. Auto:This value suggests that the complete file may be downloaded even if the user is not expected to used the video. The empty string is a synonym for the auto value.
Src:
This attribute of the vedio tag is used to specify or determine the URL of the vedio file that we want to use in our html documents or file. The value hold by this attribute is "URL".
Width:
This element specifies the width in which the video will be shown on the website. The width of video is measured in pixels.The widthcannot be measured in pixels because it only returns absolute values.
<!DOCTYPE html>
<html>
<head>
<title>HTML video tag </title>
</head>
<body>
<video controls>
<source src="myVideo.webm" type="video/webm">
<source src="myVideo.mp4" type="video/mp4">
<p>Sorry for inconvinencebut your web browser doesn't support this kind of embedded videos. Here is
a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>
</body>
</html>Output:
If the controls attribute is left empty, the browser's built-in controls will not be included in the video; however, JavaScript can be used to create custom controls.
You may controllably follow the download and playback progress of the content, as well as the setting and location of playback, using these events.
You may control the video's placement within the element's frame and its size adjustment to fit within the frame using the object-position and object-fit attributes, respectively.
To show captions and subtitles alongside your video, combine the element and the WebVTT format with some JavaScript.
By employing a <video> element, audio files may be played. This might be helpful if, for instance, you need to play audio with a WebVTT transcript because WebVTT does not support captions for the <audio> element.
You may swap out "video" for a non-existent element like <notavideo> to test the fallback content in browsers that support the element.
Example:
This example plays a movie on a web page and gives access of standard video controls to the user:
<!DOCTYPE html>
<html>
<head>
<title>HTML video tag </title>
</head>
<body>
<video controls src="https://youtu.be/lmdLCz4CAeA"
poster="https://www.youtube.com/watch?v=wpG9j5v6LkY&list=RDGMEMCMFH2exzjBeE_zAHHJOdxg&index=20&ab_channel=MasoomSharma-Topic"
width="620">
Sorry for inconvinencebut your web browser doesn't support this kind of embedded videos.
but don't worry, you can <a href="https://www.youtube.com/watch?v=wpG9j5v6LkY&list=RDGMEMCMFH2exzjBeE_zAHHJOdxg&index=20&ab_channel=MasoomSharma-Topic">download it</a>
and watch it with your favorite video player
</video>
</body>
</html>Output:
Browser support:
List of browsers that support html <video> tag are mentioned below:
Chrome: Yes, version 3 needed
Microsoft Edge: Yes, version 12 needed
Firefox: Yes, version 3.5 needed
Safari: Yes, version 3.1 needed
Opera: Yes, version 10.5 needed