Learn HTML Video

Tips (Total 7)

1. What is HTML Video

2. How to create Your own HTML Video Play using HTML <video> Element

3. How it Works HTML Video Player

4. How to create HTML <video> player Autoplay

5. Which Browsers are Supported HTML Video Player

6. What are The HTML Video Formats

7. What are the HTML Video - Media Types

# Tips-1) What is HTML Video

The HTML <video> element is used to show a video on a web page.

The HTML5 specification introduced the video element for the purpose of playing videos, partially replacing the object element.

Example HTML Video Player on HTML5

Follow the Example

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
  Your browser does not support HTML video.
</video>

<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

</body> 
</html>

Output should be:

# Tips-2) How to create Your own HTML Video Play using HTML <video> Element

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

Example of Your own HTML Video Play using HTML <video> Element

Follow the Example

index.html

Example: HTML

 <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>

Output should be:

Full Example of Your own HTML Video Play using HTML <video> Element

Follow the Example

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Output should be:

# Tips-3) How it Works HTML Video Player

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.

# Tips-4) How to create HTML <video> player Autoplay

To start a video automatically, use the autoplay attribute:

Example of HTML <video> player Autoplay

Follow the Example

index.html

Example: HTML

 <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>

Full Example of HTML <video> player Autoplay

Follow the Example

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Output should be:

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

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

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" autoplay muted>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Output should be:

# Tips-5) Which Browsers are Supported HTML Video Player

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

Element	Chrome	Edge	Firefox	Sufari	Opera
<video>	4.0	9.0	3.5	4.0	10.5

# Tips-6) What are The 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

# Tips-7) What are the HTML Video - Media Types

File Format	Media Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg