Videos in HTML

Videos in HTML with Examples

In this article, I am going to discuss Videos in HTML with Examples. Please read our previous article where we discussed Multimedia in HTML with Examples. At the end of this article, you will understand everything about HTML Videos with Examples.

HTML Videos

A video file is a collection of images displayed in a sequence to represent moving scenes. Different video codecs, such as DivX and QuickTime, are often used to encode and decode video files. A video is displayed on a web page using the HTML <video> element.

Syntax: The basic syntax of the <video> element
<video> … </video>
Web browsers commonly support three different formats: mp4, Ogg, and WebM.

Video Controls in HTML

The browser does not display any controls for the video element by default; only the video is displayed.

<video src=”file.mp4″ >

This means that the audio will only play if the video is set on autoplay, and the user is unable to stop, pause, control the volume, or jump to a specific point in the video. Because the control attribute is not defined inside the video element. We can use the controls attribute inside the video element to display the built-in controls.

<video src=”file.mp4″ controls >

Video Controls in HTML

Using the HTML5 video Element

The example below simply adds video into an HTML5 document using the browser’s default controls and a single source defined by the src attribute.

<!DOCTYPE html> 
<html> 
  <style>
    body{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color:mediumseagreen;
    }

    video{
      border-radius: 8px;
      border: 5px solid transparent;
    }
  </style>
<body> 

<video width="400" controls>  
  <source src="/parrot.mp4" type="video/mp4">
</video>

</body> 
</html>
Output:

Using the HTML5 video Element

It is always a good practice to include width and height attributes. If the height and width are not specified, the page may flicker while the video is loading.

Video controls, such as play, pause, and volume, are added by the controls attribute. Only browsers that don’t support the <video> element will display the text between the <video> and </video> tags.

HTML <video> Auto play

By default, the video file does not play automatically. We can add auto-play inside the video element to let our video file start playing automatically as the page loads.

<!DOCTYPE html> 
<html> 
  <style>
    body{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: aquamarine;
    }

    video{
      border-radius: 8px;
      border: 5px solid transparent;
    }
  </style>
<body> 

<video width="600" controls autoplay>
  <source src="/video.mp4" type="video/mp4">
</video>

</body> 
</html>
Output:

HTML <video> Auto play

Tag-Specific Attributes

The following table shows the attributes that are specific to the <video> tag.

Videos in HTML with Examples

HTML video- Media Types

HTML video- Media Types

Browser Compatibility

The <video> tag is supported in all major modern browsers.

Videos in HTML with Examples

In the next article, I am going to discuss Audio in HTML with examples. Here, in this article, I try to explain Videos in HTML with Examples and I hope you enjoy this Video in HTML with Examples article.

Leave a Reply

Your email address will not be published.