Skip to main content

HTML Video

You can create static and dynamic web pages, and you can embed multimedia content, such as videos, into your web pages.

To embed a video into an HTML document, you can use the <video> tag.

As an example:

Editor

In this example:

  • The "src" attribute specifies the URL of the video file, and the "controls" attribute displays the default set of video controls (play, pause, volume, etc.).
  • The text between the opening and closing <video> tags is displayed in browsers that do not support the <video> tag.

Width , Height , Autoplay and Loop​

You can also specify other attributes, such as "width" and "height", to control the size of the video player, and you can add additional elements, such as <source> tags, to provide alternative video formats for different browsers.

As an example:

<video width="640" height="360" autoplay loop>
     <source src="video.mp4" type="video/mp4" />
     <source src="video.webm" type="video/webm" />
     <source src="video.ogg" type="video/ogg" />
     Your browser does not support the video tag.
</video>

In this example:

  • The video player has a width of 640 pixels and a height of 360 pixels.
  • The "autoplay" attribute specifies that the video should start playing as soon as it loads, and the "loop" attribute specifies that the video should continue playing in a loop.
  • The <source> tags specify three different video files in different formats, and the browser will choose the first one that it can play.
  • If none of the formats are supported by the browser, the text "Your browser does not support the video tag." will be displayed.

Poster , Controls , Preload and Muted​

You can also add other attributes to the <video> tag to customize the video player. Here are some common attributes:

  • poster: specifies a poster image to be displayed before the video starts playing
  • controls: displays the default set of video controls (play, pause, volume, etc.)
  • preload: specifies whether the video should be preloaded (none, metadata, auto)
  • muted: specifies whether the video should be muted by default

As an example:

<video width="640" height="360" controls preload="auto" poster="poster.jpg">
     <source src="video.mp4" type="video/mp4" />
     <source src="video.webm" type="video/webm" />
     <source src="video.ogg" type="video/ogg" />
     Your browser does not support the video tag.
</video>

In this example:

  • A poster image ("poster.jpg") is displayed before the video starts playing, and the default set of video controls is displayed.
  • The video is preloaded automatically, and if the "muted" attribute were added with a value of "true", the video would be muted by default.

HTML Video - Methods, Properties, and Events​

HTML video elements have a number of properties, methods, and events that you can use to control and interact with the video player.

Here are some of the most commonly used ones:

Properties:​

  • currentTime: returns or sets the current playback time in seconds
  • duration: returns the length of the video in seconds
  • paused: returns whether the video is currently paused or not
  • ended: returns whether the video has ended or not
  • volume: returns or sets the volume of the video (0.0 to 1.0)
  • muted: returns or sets whether the video is muted or not
  • src: returns or sets the URL of the video file

As an example:

<video id="my-video" src="video.mp4"></video>

<script>
     var video = document.getElementById("my-video");
     video.play();
     console.log("Current time: " + video.currentTime);
     console.log("Duration: " + video.duration);
     console.log("Paused: " + video.paused);
     console.log("Ended: " + video.ended);
     console.log("Volume: " + video.volume);
     video.volume = 0.5;
     console.log("Muted: " + video.muted);
     video.muted = true;
     console.log("Muted: " + video.muted);
</script>

In this example:

  • The <video> tag includes an "id" attribute that is used to reference the video element in JavaScript.
  • The "play" method is used to start playing the video, and the "currentTime", "duration", "paused", "ended", "volume", and "muted" properties are logged to the console.
  • The "volume" and "muted" properties are also set to new values.

Methods:​

  • play: starts playing the video
  • pause: pauses the video
  • load: loads the video file
  • canPlayType: returns whether the browser can play a specified video format

As an example:

<video id="my-video">
     <source src="video.mp4" type="video/mp4" />
     <source src="video.webm" type="video/webm" />
     <source src="video.ogg" type="video/ogg" />
     Your browser does not support the video tag.
</video>

<script>
     var video = document.getElementById("my-video");
     video.load();
     console.log(video.canPlayType("video/mp4"));
     console.log(video.canPlayType("video/webm"));
     console.log(video.canPlayType("video/ogg"));
     setTimeout(function () {
          video.play();
     }, 5000);
</script>

In this example:

  • The <video> tag includes multiple <source> tags for different video formats.
  • The "load" method is used to load the video file, and the "canPlayType" method is used to check whether the browser can play each of the specified video formats.
  • Finally, the "play" method is called after a 5-second delay using the "setTimeout" function.

Events:​

  • play: fires when the video starts playing
  • pause: fires when the video is paused
  • ended: fires when the video has ended
  • timeupdate: fires when the current playback time changes
  • loadedmetadata: fires when the video metadata (duration, size, etc.) has been loaded

As an example:

<video id="myVideo" src="video.mp4"></video>

<script>
     var video = document.getElementById("myVideo");

     // Play event
     video.addEventListener("play", function () {
          console.log("Video is playing");
     });

     // Pause event
     video.addEventListener("pause", function () {
          console.log("Video is paused");
     });

     // Ended event
     video.addEventListener("ended", function () {
          console.log("Video has ended");
     });

     // Timeupdate event
     video.addEventListener("timeupdate", function () {
          console.log("Current time: " + video.currentTime);
     });

     // Loadedmetadata event
     video.addEventListener("loadedmetadata", function () {
          console.log("Video duration: " + video.duration);
          console.log(
               "Video size: " + video.videoWidth + "x" + video.videoHeight
          );
     });
</script>

In this example:

  • We're adding event listeners to the video element for each of the events play, pause, ended, timeupdate, and loadedmetadata.
  • When the video starts playing, the play event is fired, and we log a message to the console. Similarly, when the video is paused or ends, the pause and ended events are fired, respectively.
  • The timeupdate event is fired every time the current playback position changes, and we log the current time to the console.
  • The loadedmetadata event is fired when the video metadata has been loaded, and we log the video duration and size to the console.