Horje
What is HTML <video> Tag

Definition and Usage

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.

The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

There are three supported video formats in HTML: MP4, WebM, and OGG.

Browser MP4 WebM Ogg
Edge YES YES YES
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

Tips and Notes

Tip: For audio files, look at the <audio> tag.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Optional Attributes

Attribute Value Description
autoplay autoplay Specifies that the video will start playing as soon as it is ready
controls controls Specifies that video controls should be displayed (such as a play/pause button etc).
height pixels Sets the height of the video player
loop loop Specifies that the video will start over again, every time it is finished
muted muted Specifies that the audio output of the video should be muted
poster URL Specifies an image to be shown while the video is downloading, or until the user hits the play button
preload auto
metadata
none
Specifies if and how the author thinks the video should be loaded when the page loads
src URL Specifies the URL of the video file
width pixels Sets the width of the video player

Global Attributes

The <video> tag also supports the Global Attributes in HTML.


Event Attributes

The <video> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: HTML Audio/Video DOM Reference


Default CSS Settings

None.


How to create HTML <video> Tag

It will Play a video in HTML Page.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The video element</h1>

<video width="320" height="240" controls>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Output should be:

How to create HTML <video> Tag

How to add HTML <video> autoplay Attribute on HTML <video> Tag

Definition and Usage

The autoplay attribute is a boolean attribute.

When present, the video will automatically start playing.

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Add muted after autoplay to let your video file start playing automatically (but muted). 


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<video autoplay>
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The video autoplay attribute</h1>

<video width="320" height="240" controls autoplay>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Output should be:

How to add HTML <video> autoplay Attribute on HTML <video> Tag

How to add HTML <video> controls Attribute on HTML <video> Tag

It is A <video> element with browser default controls.

Definition and Usage

The controls attribute is a boolean attribute.

When present, it specifies that video controls should be displayed.

Video controls should include:


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<video controls>

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The video controls attribute</h1>

<video width="320" height="240" controls>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Output should be:

How to add HTML <video> controls Attribute on HTML <video> Tag

How to add HTML <video> height Attribute on HTML <video> Tag

It is A video player with a specified height and width.

Definition and Usage

The height attribute specifies the height of a video player, in pixels.

Tip: Always specify both the height and width attributes for videos. If these attributes are set, the required space for the video is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video loads).

Note: Do not rescale video with the height and width attributes! Downsizing a large video with these attributes forces a user to download the original video (even if it looks small on the page). The correct way to rescale a video is with a program, before using it on a web page.


Browser Support

Syntax

<video height="pixels">

Attribute Values

Value Description
pixels The height of the video, in pixels (i.e. height="100")
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The video width and height attributes</h1>

<video width="320" height="240" controls>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Output should be:

How to add HTML <video> height Attribute on HTML <video> Tag

How to add HTML <video> loop Attribute in HTML <video> Tag

It is A video that will start over again, every time it is finished.

Definition and Usage

The loop attribute is a boolean attribute.

When present, it specifies that the video will start over again, every time it is finished.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<video loop>
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The video loop attribute</h1>

<video width="320" height="240" controls loop>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Output should be:

How to add HTML <video> loop Attribute in HTML <video> Tag

How to add HTML <video> muted Attribute in

Definition and Usage

The muted attribute is a boolean attribute.

When present, it specifies that the audio output of the video should be muted.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<video muted>
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The video muted attribute</h1>

<video width="320" height="240" controls muted>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Output should be:

How to add HTML <video> muted Attribute in

How to add HTML <video> poster Attribute in HTML <video> Tag

It is A video player with a poster image.

Before playing video, It will show a default image.

Definition and Usage

The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<video poster="URL">

Attribute Values

Value Description
URL Specifies the URL of the image file.

Possible values:

  • An absolute URL - points to another web site (like href="http://www.example.com/poster.jpg")
  • A relative URL - points to a file within a web site (like href="poster.jpg")
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The video poster attribute</h1>

<video width="320" height="240" poster="https://horje.com/avatar.png" controls>
   <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
   <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
   Your browser does not support the video tag.
</video>

</body>
</html>

Output should be:

How to add HTML <video> poster Attribute in HTML <video> Tag

How to add HTML <video> preload Attribute in HTML <video> Tag

Author thinks that the video should NOT be loaded when the page loads.

Definition and Usage

The preload attribute specifies if and how the author thinks that the video should be loaded when the page loads.

The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances.

Note: The preload attribute is ignored if autoplay is present.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

<video preload="auto|metadata|none">

Attribute Values

Value Description
auto The author thinks that the browser should load the entire video when the page loads
metadata The author thinks that the browser should load only metadata when the page loads
none The author thinks that the browser should NOT load the video when the page loads
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The video preload attribute</h1>

<video width="320" height="240" controls preload="none">
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Output should be:

How to add HTML <video> preload Attribute in HTML <video> Tag

How to add HTML <video> src Attribute in HTML <video> Tag

It will Play a video.

Definition and Usage

The src attribute specifies the location (URL) of the video file.

The example above uses an Ogg file, and will work in Chrome, Edge, Firefox and Opera.

To play the video in old Internet Explorer and Safari, we must use an MPEG4 file.

To make it work in all browsers - add several <source> elements inside the <video> element. Each <source> elements can link to different video files. The browser will use the first recognized format:

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

The src attribute is supported in all of the major browsers, however, the file format defined may not be supported in all browsers.


Syntax

<video src="URL">

Attribute Values

Value Description
URL The URL of the video file.

Possible values:

  • An absolute URL - points to another web site (like src="http://www.example.com/movie.ogg")
  • A relative URL - points to a file within a web site (like src="movie.ogg")
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The video src attribute</h1>

<video width="320" height="240" controls src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4">
  Your browser does not support the video tag.
</video>

<p><b>Note:</b> The .ogg fileformat is not supported in old IE and Safari.</p>

</body>
</html>

Output should be:

How to add HTML <video> src Attribute in HTML <video> Tag

More Example of HTML <video> src

Play a video simple.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Output should be:

How to add HTML <video> width Attribute in HTML <video> Tag

This is A video player with a specified width and height.

Definition and Usage

The width attribute specifies the width of a video player, in pixels.

Tip: Always specify both the height and width attributes for videos. If these attributes are set, the required space for the video is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video loads).

Note: Do not rescale video with the height and width attributes! Downsizing a large video with these attributes forces a user to download the original video (even if it looks small on the page). The correct way to rescale a video is with a program, before using it on a web page.


Browser Support

Syntax

<video width="pixels">

Attribute Values

Value Description
pixels The width of the video, in pixels (i.e. width="100")
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1>The video width and height attributes</h1>

<video width="320" height="240" controls>
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
  <source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Output should be:

How to add HTML <video> width Attribute in HTML <video> Tag




html video

Related Articles
What is HTML <!--...--> Tag HTML Tag
What is HTML <!DOCTYPE> Declaration HTML Tag
What is HTML Elements and Doctypes HTML Tag
What is HTML <a> Tag HTML Tag
What is HTML <abbr> Tag HTML Tag
What is HTML <acronym> Tag HTML Tag
What is HTML <address> Tag HTML Tag
What is HTML <applet> Tag HTML Tag
What is HTML <area> Tag HTML Tag
What is HTML <article> Tag HTML Tag
What is HTML <aside> Tag HTML Tag
What is HTML <audio> Tag HTML Tag
What is HTML <b> Tag HTML Tag
What is HTML <base> Tag HTML Tag
What is HTML <basefont> Tag HTML Tag
What is HTML <bdi> Tag HTML Tag
What is HTML <bdo> Tag HTML Tag
What is HTML <big> Tag HTML Tag
What is HTML <blockquote> Tag HTML Tag
What is HTML <body> Tag HTML Tag
What is HTML <br> Tag HTML Tag
What is HTML <button> Tag HTML Tag
What is HTML <canvas> Tag HTML Tag
What is HTML <caption> Tag HTML Tag
What is HTML <center> Tag HTML Tag
What is HTML <cite> Tag HTML Tag
What is HTML <code> Tag HTML Tag
What is HTML <col> Tag HTML Tag
How to create HTML <colgroup> Tag HTML Tag
What is HTML <data> Tag HTML Tag
What is HTML <datalist> Tag HTML Tag
What is HTML <dd> Tag HTML Tag
What is HTML <del> Tag HTML Tag
What is HTML <details> Tag HTML Tag
What is HTML <dfn> Tag HTML Tag
What is HTML <dialog> Tag HTML Tag
What is HTML <dir> Tag HTML Tag
What is HTML <div> Tag HTML Tag
What is HTML <dl> Tag HTML Tag
What is HTML <dt> Tag HTML Tag
What is HTML <em> Tag HTML Tag
What is HTML <embed> Tag HTML Tag
What is HTML <fieldset> Tag HTML Tag
What is HTML <figcaption> Tag HTML Tag
What is HTML <figure> Tag HTML Tag
What is HTML <font> Tag HTML Tag
What is HTML <footer> Tag HTML Tag
What is HTML <form> Tag HTML Tag
What is HTML <frame> Tag HTML Tag
What is HTML <frameset> Tag HTML Tag
What is HTML <h1> to <h6> Tags HTML Tag
What is HTML <head> Tag HTML Tag
What is HTML <header> Tag HTML Tag
What is HTML <hgroup> Tag HTML Tag
What is HTML <hr> Tag HTML Tag
What is HTML <html> Tag HTML Tag
What is HTML <i> Tag HTML Tag
What is HTML <iframe> Tag HTML Tag
What is HTML <img> Tag HTML Tag
What is HTML <input> Tag HTML Tag
What is HTML <ins> Tag HTML Tag
What is HTML <kbd> Tag HTML Tag
What is HTML <label> Tag HTML Tag
What is HTML <legend> Tag HTML Tag
What is HTML <li> Tag HTML Tag
What is HTML <link> Tag HTML Tag
What is HTML <main> Tag HTML Tag
What is HTML <map> Tag HTML Tag
What is HTML <mark> Tag HTML Tag
What is HTML <menu> Tag HTML Tag
What is HTML <meta> Tag HTML Tag
What is HTML <meter> Tag HTML Tag
What is HTML <nav> Tag HTML Tag
What is HTML <noframes> Tag HTML Tag
What is HTML <noscript> Tag HTML Tag
What is HTML <object> Tag HTML Tag
What is HTML <ol> Tag HTML Tag
What is HTML <optgroup> Tag HTML Tag
What is HTML <option> Tag HTML Tag
What is HTML <output> Tag HTML Tag
What is HTML <p> Tag HTML Tag
What is HTML <param> Tag HTML Tag
What is HTML <picture> Tag HTML Tag
What is HTML <pre> Tag HTML Tag
What is HTML <progress> Tag HTML Tag
What is HTML <q> Tag HTML Tag
What is HTML <rp> Tag HTML Tag
What is HTML <rt> Tag HTML Tag
What is HTML <ruby> Tag HTML Tag
What is HTML <s> Tag HTML Tag
What is HTML <samp> Tag HTML Tag
What is HTML <script> Tag HTML Tag
What is HTML <search> Tag HTML Tag
What is HTML <section> Tag HTML Tag
What is HTML <select> Tag HTML Tag
What is HTML <small> Tag HTML Tag
What is HTML <source> Tag HTML Tag
What is HTML <span> Tag HTML Tag
What is HTML <strike> Tag HTML Tag
What is HTML <strong> Tag HTML Tag
What is HTML <style> Tag HTML Tag
What is HTML <sub> Tag HTML Tag
What is HTML <summary> Tag HTML Tag
What is HTML <sup> Tag HTML Tag
What is HTML <svg> Tag HTML Tag
What is HTML <table> Tag HTML Tag
What is HTML <tbody> Tag HTML Tag
What is HTML <td> Tag HTML Tag
What is HTML <template> Tag HTML Tag
What is HTML <textarea> Tag HTML Tag
What is HTML <tfoot> Tag HTML Tag
What is HTML <th> Tag HTML Tag
What is HTML <thead> Tag HTML Tag
What is HTML <time> Tag HTML Tag
What is HTML <title> Tag HTML Tag
What is HTML <tr> Tag HTML Tag
What is HTML <track> Tag HTML Tag
What is HTML <tt> Tag HTML Tag
What is HTML <u> Tag HTML Tag
What is HTML <ul> Tag HTML Tag
What is HTML <var> Tag HTML Tag
What is HTML <video> Tag HTML Tag
How to add HTML <wbr> Tag HTML Tag

Single Articles
How to create HTML <video> TagHTML Tag
How to add HTML <video> autoplay Attribute on HTML <video> TagHTML Tag
How to add HTML <video> controls Attribute on HTML <video> TagHTML Tag
How to add HTML <video> height Attribute on HTML <video> TagHTML Tag
How to add HTML <video> loop Attribute in HTML <video> TagHTML Tag
How to add HTML <video> muted Attribute in HTML Tag
How to add HTML <video> poster Attribute in HTML <video> TagHTML Tag
How to add HTML <video> preload Attribute in HTML <video> TagHTML Tag
How to add HTML <video> src Attribute in HTML <video> TagHTML Tag
How to add HTML <video> width Attribute in HTML <video> TagHTML Tag

Read Full:
HTML Tag
Type:
Develop
Category:
Web Tutorial
Sub Category:
HTML Tag
Uploaded:
3 weeks ago
Uploaded by:
Admin
Views:
41


Reffered: https://www.w3schools.com/tags/tag_video.asp

Share on: