creating a custom "play" button for a video

Question

This is my main markup right now.

<div id="video_container">
   <video id="video">
      <source src="popeye_patriotic_popeye.mpeg" type="video/mp4">
   </video>

</div>
<button type="button" id="play_button">Play</button>

basically we have the video box, as well as the "play" button. I am wondering if through javascript, it would be possible to allow this button to play/pause the video. I am not sure if this doable or not, but if it is please let me know how I would go about doing it.

Thanks

Answer 1

This is easily done in JavaScript, and it's actually pretty basic.

This code bellow would do it just for you:

var playButton = document.getElementById("play_button");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
  if (video.paused == true) {
    // Play the video
    video.play();

    // Update the button text to 'Pause'
    playButton.innerHTML = "Pause";
  } else {
    // Pause the video
    video.pause();

    // Update the button text to 'Play'
    playButton.innerHTML = "Play";
  }
});