Play/Pause Button For HTML5 Video Using JavaScript

By Faruque Ahamed Mollick

Here in this tutorial, I am going to tell you how you can build a play pause button for HTML5 video easily with simple code snippets.

To develop a play/pause button lets first create an HTML5 video player.

Below is the HTML code to create an HTML5 video player:

<div style="text-align:center"> 
  <button id="vidbutton">Play</button> 
  <br><br>
  <video id="myvid" width="420">
    <source src="vid.mp4" type="video/mp4">
    <source src="vid.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>

We have placed the video inside a div element and all the content inside the div element will be at the center. So you can see the video in the center. We have set an ID for the video player “myvid” and the button ID “vidbutton”. We will use these ID in JavaScript for the interaction.

Disable HTML Input Field And Make It Un-clickable

Now you need to place the below JavaScript code:

var ppbutton = document.getElementById("vidbutton");
ppbutton.addEventListener("click", playPause);

myVideo = document.getElementById("myvid");
function playPause() { 
    if (myVideo.paused) {
        myVideo.play();
        ppbutton.innerHTML = "Pause";
        }
    else  {
        myVideo.pause(); 
        ppbutton.innerHTML = "Play";
        }
}

That’s all we need to do. The above code will give the functionality to the button to play and pause the video. Also, in the time of playing the video it will show “Pause” text on the button and after you pause the video, it will show “Play” text on the button.



Complete code for Play and Pause button for HTML5 video

Below is the complete code for creating a Play/Pause button to play and pause the video.

<!DOCTYPE html> 
<html> 
<head>
  <title>Play/Pause button for HTML5 video using JavaScript</title>
</head>
<body> 

<div style="text-align:center"> 
  <button id="vidbutton">Play</button> 
  <br><br>
  <video id="myvid" width="420">
    <source src="vid.mp4" type="video/mp4">
    <source src="vid.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div> 

<script> 
var ppbutton = document.getElementById("vidbutton");
ppbutton.addEventListener("click", playPause);

myVideo = document.getElementById("myvid");
function playPause() { 
    if (myVideo.paused) {
        myVideo.play();
        ppbutton.innerHTML = "Pause";
        }
    else  {
        myVideo.pause(); 
        ppbutton.innerHTML = "Play";
        }
} 

</script> 

</body> 
</html>

Now we will run it on our browser and then we will able to play or pause the video just by using one Play/Pause button. You can also try it.

Simple Color Picker Input Field In HTML Form

Change text color on mouse hover –¬†CSS code

After you play the video by clicking play button the “Play” text will immediately change into “Pause” text and after you click on pause it will again be “Play”. All these will be done by the¬†addEventListener function of JavaScript.

I hope you enjoyed this tutorial and also it becomes helpful to you.

Leave a Reply

Your email address will not be published. Required fields are marked *