In this short post, learn how to play an video file and pause video in HTML with JavaScript. This article will also discuss the <video> html tag which was introduced in HTML5.

Like the <audio> tag, the <video> tag helps to embed videos in a html page. The tag is used to embed videos content in an HTML document without requiring any additional plugins. Before the introduction of HTML5, additional plugins were used to play videos in a web page.

The supported video formats in HTML5 are MP4, WebM, and OGG.

To play a video using JavaScript, first define the video element in HTML.

<video id="welcome" width="320" height="240" controls>
  <source src="welcome.mp4" type="video/mp4">
//  <source src="welcome.ogg" type="video/ogg">
//  <source src="welcome.webm" type="video/webm">
Your browser does not support the video tag.
</video>

The height and width properties define the size of the video embed. To play the video automatically on page load, you can use the autoplay property.

<video id="welcome" width="320" height="240" autoplay>
  <source src="welcome.mp4" type="video/mp4">
</video>

Get the video element in JavaScript

const welcomeVid = document.querySelector("#welcome");

Play the video

welcomeVid.play();

To pause the video, use the pause() method.

welcomeVid.pause();