HTML : Video

In HTML, the <video> element is used to embed and display videos on a web page. The <video> element provides a native way to play video content without relying on third-party plugins or players. It supports various video formats and offers several attributes and methods to control video playback and appearance.

Here's an example of how to use the <video> element:

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

In this example, the src attribute specifies the URL or path to the video file, in this case, "video.mp4". The controls attribute adds default video controls such as play, pause, volume, and timeline to the video player. The text "Your browser does not support the video tag." is displayed if the browser doesn't support the <video> element.

The <video> element also supports several other attributes:

• autoplay: Specifies that the video should automatically start playing when the page loads.
• loop: Indicates that the video should loop and repeat playback indefinitely.
• muted: Sets the video's initial audio state to be muted.
• poster: Specifies an image to be shown as a placeholder before the video loads or is played.
• width and height: Sets the dimensions of the video player.

In addition to these attributes, you can use JavaScript to control the video playback programmatically. The <video> element provides methods and properties such as play(), pause(), currentTime, and volume that allow you to manipulate the video playback and retrieve information about the video.

Here's an example of controlling video playback with JavaScript:

<video id="myVideo" src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

<script>
  const video = document.getElementById('myVideo');

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }

  function setVolume(volume) {
    video.volume = volume;
  }
</script>

In this example, the JavaScript code selects the video element using its id attribute and defines functions to play, pause, and set the volume of the video.

 

With the <video> element and its associated attributes and methods, you can easily embed and control video content in your web pages, making it accessible and interactive for users.