How To Stop Html Video

by

HTML5 introduced the <video> element, making it easy to add videos directly into web pages without relying on third-party plugins. While the basic usage is quite simple, you may want to have more control over your videos, such as stopping them programmatically.

Using the pause() and currentTime Properties

To stop an HTML video, you need to perform two actions: pause the video playback and reset its playhead to the beginning. This can be achieved using the pause() method and the currentTime property of the video element.

First, let’s create a simple HTML video element:

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

Next, add a button that will trigger the stop action:

<button onclick="stopVideo()">Stop Video</button>

Now, create a JavaScript function called stopVideo() that will pause the video and reset its playhead:

<script>
function stopVideo() {
  var video = document.getElementById("myVideo");
  video.pause();
  video.currentTime = 0;
}
</script>

Final Code

Here’s the complete code for stopping an HTML video:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stop HTML Video Example</title>
</head>
<body>

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

<button onclick="stopVideo()">Stop Video</button>

<script>
function stopVideo() {
  var video = document.getElementById("myVideo");
  video.pause();
  video.currentTime = 0;
}
</script>

</body>
</html>

That’s it! Now you know how to stop an HTML video using JavaScript. This technique gives you better control over the user experience and allows you to create more interactive web pages with dynamic video content.