Play/Pause Button For HTML5 Video Using JavaScript
By Faruque Ahamed MollickHere 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.
quick and nice
thank god!!!! i found it. im searching this from last 3 days. great work.
How do you do this with multiple videos on a page? Thx
<body
Play video1
Your browser does not support HTML5 video.
Play video1
Your browser does not support HTML5 video.
// make array for all vids. Im separating using ‘, ‘ (comma space)
var str=’video1.mov, video2.mov, video3.mov, video4.mov, video5.mov, video6.mov, video7.mov’;
var myVideoList = str.split(‘, ‘); //split string on comma space
// console.log( myVideoList );
function do_vidBtnClick ( inputNum )
{
var inum = inputNum
var myVid=myVideoList[ inum-1 ];
// you set your video path on next line
myFileName=”/assets/images/howto/”+ myVid
var myDId=”myvid”+inum;
// set up video, remove autoplay, set controls on
myVideo = document.getElementById(myDId);
myVideo.removeAttribute(‘autoplay’);
myVideo.src = myFileName;
myVideo.controls = true;
myVideo.load();
}
Method 2: Using the play() and pause() method: The play() method in JavaScript is used to attempt the playback of a media file. In jQuery, the video file is first selected using a selector and the actual element is selected using the get() method. Then the play() method is used on this element to attempt to start the video.
Thanks, it was really helpful…. Please can you help me with the code to make a video gallery like youtube or something related to it…
myVideo.paused hidden
myVideo.play visible
please code script