HTMLs Tutorial

HTML Tutorial HTML Tags HTML Basic Tags HTML Attributes HTML Elements HTML Formatting HTML Text Format HTML body tag HTML samp tag HTML script Tag HTML section tag HTML select tag HTML source tag HTML span tag HTML strike tag HTML strong tag HTML style tag HTML sub tag HTML summary tag HTML sup Tag HTML svg tag HTML table tag HTML u tag HTML Headings HTML Paragraphs HTML wbr tag HTML Anchor HTML Image HTML Lists HTML Ordered List HTML Unordered List HTML Form HTML Form input HTML with CSS HTML Layouts HTML References HTML Frames HTML Links Fieldset Tag in HTML Basic HTML Tags Br Tag in HTML Free HTML Templates How to Create a Table in HTML HTML Calendar HTML Card HTML Cellspacing HTML Center Image HTML Checkbox Read-only HTML Cleaner HTML Code for a Tab HTML Comment HTML Compiler HTML Nested Forms HTML Overlay Text on the Image HTML Select Option Default HTML Snake Game HTML Subheader HTML Tab Character dd Tag in HTML How Many HTML Tags are There HTML Align Tag HTML Responsive HTML Tab Code HTML Table Alternate Row Color HTML Table Fix Column Width Contact HTML DL Tag in HTML How to Insert Image in HTML HTML Background Color HTML Dark Mode How to Convert HTML to PNG HTML Data Toggle HTML Email Template HTML Font Color HTML Font Family ID and Class in HTML HTML Tab Space HTML Tab Tag HTML Itemprop HTML Itemscope HTML Form Design HTML Input Only Numbers HTML Textarea HTML to JPG HTML to Markdown Python li Tag in HTML MDN HTML What is the Correct HTML for Making a Hyperlink? What is the Root Element of an HTML Document How to Make a Box in HTML How to Save HTML Files in Notepad How to Align Text in HTML How to Change Font Color in HTML? How to Change Font Size in HTML How to Change Image Size in HTML How to Create a HTML Page How to Create a Link in HTML File? How to Create an HTML File? HR Tag in HTML HTML Base Tag HTML Default Attribute HTML Hyperlink HTML Indent HTML Injection Payloads HTML Input Numbers Only HTML Roadmap HTML Row Height HTML Schedule HTML Space HTML Tab HTML vs HTTP HTML5 API HTML5 Video HTML Collection to Array Text Area in HTML

HTML5 Advance

HTML5 Tutorial HTML5 Tags HTML Button Tag HTML canvas Tag HTML caption Tag HTML City tag HTML Tag HTML5 SVG HTML Event Attribute HTML5 Audio HTML5 Youtube HTML5 Button Tag HTML5 Tags

Misc

How to add JavaScript to HTML How to change font in HTML How to change text color in HTML HTML Date HTML Hide Element HTML Nested Table HTML Reset Button What does HTML stand for? HTML Background Image HTML Tag Div Tag in HTML How to insert Image in HTML How to create a link with no underline in HTML How to insert spacestabs in text using HTMLCSS HTML tag HTML Code HTML Tag HTML Canvas Design a tribute page using HTML and CSS What is a Container tag Font tag in HTML Difference between HTML and DHTML Empty Tag in HTML HTML Button Link Html Line Break Img src HTML Nested List in HTML Placeholder in HTML TD in HTML HTML Space Code HTML Target Attribute HTML Tag Markup Meaning in HTML Border-Collapse in HTML HTML Onclick Online HTML Compiler Convert HTML to PDF HTML Formatter HTML5 - Web Storage HTTP – Responses Container Tag in HTML DL Tag in HTML Horizontal Rule HTML HTML Tab Text Html Table Cell Background Color HTML Table Cell Color HTML Col Width How Many HTML Tags are There Convert String to Unicode Characters in Python HTML Runner HTML Style Attribute HTML Superscript Attribute HTML tabindex Marquee Tag in HTML HTML Dynamic Form HTML side Tag HTML Pattern Attribute HTML q Tag HTML Readonly

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:

HTML Video Tag

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:

HTML Video Tag

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:

HTML Video Tag

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