top of page

The HTML <video> Element

 

To show a video in HTML, use the <video> element:

 

EXAMPLE:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

How it Works

The controls attribute adds video controls, like play, pause, and volume.

 

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

 

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

 

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

HTML <video> Autoplay

To start a video automatically use the autoplay attribute:

EXAMPLE:

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

HTML Video Formats

There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:

 

 

 

 

 

 

 

HTML Video - Media Types

 

 

 

 

 

HTML Video - Methods, Properties, and Events

The HTML DOM defines methods, properties, and events for the <video> element.

 

This allows you to load, play, and pause videos, as well as setting duration and volume.

 

There are also DOM events that can notify you when a video begins to play, is paused, etc.

EXAMPLE:

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formnovalidate="formnovalidate"
  value="Submit without validation">
</form>

HTML Video Tags

 

 

 

 

 

48.PNG
49.PNG
50.PNG

© 2020 by Web Laboratory Instructor Guide. Proudly created with Wix.com

bottom of page