Databases
StackOverflow2013
Postsdbo
POHTML5 Video Play/Stop button with Javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5 Video Play/Stop button with Javascript
    text
    copied!<p>My custom HTML5 video play is almost complete, I'm just having a slight issue with the Stop button which essentially is a pause button that just resets the video to the beginning.</p> <p>Below is my code (albeit a little messy);</p> <pre><code>&lt;script type="text/javascript"&gt; function stopPlayer() { var mediaPlayer; mediaPlayer = document.getElementById('media-video'); mediaPlayer.controls = false; mediaPlayer.pause(); mediaPlayer.currentTime = 0; if ( mediaPlayer.pause == true ) { $('.pause-btn').hide(); $('.play-btn').show(); } } function playPlayer() { var mediaPlayer; mediaPlayer = document.getElementById('media-video'); mediaPlayer.controls = false; mediaPlayer.play(); } function playPause() { var mediaPlayer = document.getElementById('media-video'); if (mediaPlayer.paused) { mediaPlayer.play(); $('.pause-btn').show(); $('.play-btn').hide(); } else { mediaPlayer.pause(); $('.play-btn').show(); $('.pause-btn').hide(); } } &lt;/script&gt; </code></pre> <p>The code in question is inside the stopPlayer(); function -</p> <pre><code>if ( mediaPlayer.pause == true ) { $('.pause-btn').hide(); $('.play-btn').show(); } </code></pre> <p>What I'm trying to do is check to see if the video is "Stopped" with the StopPlayer function and then hide the pause button and show the play button. As these need to be reset when the the video is stopped. </p> <p>Currently if you press the stop button, the pause button is still there.</p> <p>Any advice would be great :)</p> <p>Edit: Fixed @MelanciaUK suggested I removed the == true on the if statement, which fixed my issue. Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload