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

Loading...

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.