VIDEO HTML Code

By | June 17, 2020

The HTML <video> element is used to show a video on a web 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>

The autoplay attribute does not work in mobile devices like iPad and iPhone.

HTML Video Formats

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

BrowserMP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaYES (from Opera 25)YESYES

HTML Video – Media Types

File FormatMedia Type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

HTML Video – Methods, Properties, and Events

HTML defines DOM 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.

For a full DOM reference, go to our HTML Audio/Video DOM Reference.


HTML Video Tags

TagDescription
<video>Defines a video or movie
<source>Defines multiple media resources for media elements, such as <video> and <audio>
<track>Defines text tracks in media players
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *