The HTML <video>
element is used to show a video on a web page. Currently, there are three video formats supported for HTML video tag:
- mp4
- webM
- ogg
Example
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 allows playing video in the web browser by using <video> tag. To embed the video in the webpage, we use src element for mentioning the file address and width and height attributes are used to define its size. Example: In this example, we are using <video> tag to to add video into the web page
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>
Add muted
after autoplay
to let your video start playing automatically (but muted):
Example
<video width="320" height="240" autoplay muted> <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:
Browser | MP4 | WebM | Ogg |
---|---|---|---|
Edge | YES | YES | YES |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | YES | NO |
Opera | YES | YES | YES |
HTML Video – Media Types
File Format | Media Type |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
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.
HTML Video Tags
Tag | Description |
---|---|
<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 |
Attributes of HTML Video Tag
Let’s see the list of HTML 5 video tag attributes.
Attribute | Description |
---|---|
controls | It defines the video controls which is displayed with play/pause buttons. |
height | It is used to set the height of the video player. |
width | It is used to set the width of the video player. |
poster | It specifies the image which is displayed on the screen when the video is not played. |
autoplay | It specifies that the video will start playing as soon as it is ready. |
loop | It specifies that the video file will start over again, every time when it is completed. |
muted | It is used to mute the video output. |
preload | It specifies the author view to upload video file when the page loads. |
src | It specifies the source URL of the video file. |
Let’s see the table that defines which web browser supports video file format.
Browser | mp4 | webM | ogg |
---|---|---|---|
Internet Explorer | yes | no | no |
Google Chrome | yes | yes | yes |
Mozilla Firefox | yes | yes | yes |
Opera | no | yes | yes |
Apple Safari | yes | no | no |
HTML Audio
The HTML <audio>
element is used to play an audio file on a web page.
The HTML <audio> Element
To play an audio file in HTML, use the <audio>
element:
Example
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
HTML Audio – How It Works
The controls
attribute adds audio controls, like play, pause, and volume. The <source>
element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format. The text between the <audio>
and </audio>
tags will only be displayed in browsers that do not support the <audio>
element.
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay
attribute:
Example
<audio controls autoplay> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
Example
<audio controls autoplay muted> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
HTML Audio Formats
There are three supported audio formats: MP3, WAV, and OGG. The browser support for the different formats is:
Browser | MP3 | WAV | OGG |
---|---|---|---|
Edge/IE | YES | YES* | YES* |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | YES | NO |
Opera | YES | YES | YES |
*From Edge 79
HTML Audio – Media Types
File Format | Media Type |
---|---|
MP3 | audio/mpeg |
OGG | audio/ogg |
WAV | audio/wav |
HTML Audio – Methods, Properties, and Events
The HTML DOM defines methods, properties, and events for the <audio>
element. This allows you to load, play, and pause audios, as well as set duration and volume. There are also DOM events that can notify you when an audio begins to play, is paused, etc.
HTML Audio Tags
Tag | Description |
---|---|
<audio> | Defines sound content |
<source> | Defines multiple media resources for media elements, such as <video> and <audio> |
HTML Plug-ins
Plug-ins are computer programs that extend the standard functionality of the browser.
Plug-ins
Plug-ins were designed to be used for many different purposes:
- To run Java applets
- To run Microsoft ActiveX controls
- To display Flash movies
- To display maps
- To scan for viruses
- To verify a bank id
The support for Shockwave Flash has also been turned off in modern browsers.
The <object> Element
The <object>
element is supported by all browsers. The <object>
element defines an embedded object within an HTML document. It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players) in web pages, but can also be used to include HTML in HTML:
Example
<object width="100%" height="500px" data="snippet.html"></object>
Example
<object data="audi.jpeg"></object>
The <embed> Element
The <embed>
element is supported in all major browsers. The <embed>
element also defines an embedded object within an HTML document. Web browsers have supported the <embed> element for a long time. However, it has not been a part of the HTML specification before HTML5.
Example
<embed src="audi.jpeg">
Example
<embed width="100%" height="500px" src="snippet.html">
HTML YouTube Videos
The easiest way to play videos in HTML, is to use YouTube.
Struggling with Video Formats?
Converting videos to different formats can be difficult and time-consuming. An easier solution is to let YouTube play the videos in your web page.
YouTube Video Id
YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video. You can use this id, and refer to your video in the HTML code.
Playing a YouTube Video in HTML
To play your video on a web page, do the following:
- Upload the video to YouTube
- Take a note of the video id
- Define an
<iframe>
element in your web page - Let the
src
attribute point to the video URL - Use the
width
andheight
attributes to specify the dimension of the player - Add any other parameters to the URL (see below)
Example
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe>