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

just google html5 video play method https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video — Besi, Oct 03 '16 at 20:31
Possible duplicate with http://stackoverflow.com/q/10327907/6084217 — Ayrton Dumas, Oct 03 '16 at 20:31
Have you looked at the video APIs at all? https://msdn.microsoft.com/library/hh924823%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396 — dmeglio, Oct 03 '16 at 20:32

score 11 · Accepted Answer · answered Oct 03 '16 at 20:32

11

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";
  }
});

answered Oct 03 '16 at 20:32

FluxCoder

1,266
11
22

ok, so thats why it wasn't working. The tutorial I was using did no mention the second part about pausing the video. It works now. – colby42536 Oct 03 '16 at 20:33
Is there a way to change the name of the function on the event listener? – colby42536 Oct 03 '16 at 20:34
1

@colby42536 What do you mean? If you are talking about this bit: ` function() {` then no. – FluxCoder Oct 03 '16 at 20:35
yep, that was what I was refering to. Probably explains why the tutorial didn't work, cause I changed the name there – colby42536 Oct 03 '16 at 20:36
1

@colby42536 Okay then, that's what you *can't* change :) – FluxCoder Oct 03 '16 at 20:37
@colby42536 there is no name, specified so I don't know what you're referring to. – dmeglio Oct 03 '16 at 20:37
worth adding that you need to define video var too. var video = document.getElementById("video"); – liamcrean Apr 11 '21 at 16:38

creating a custom "play" button for a video

1 Answers1