'HTML5 Javascript Play/Pause button

I'm attempting to customise the control buttons on my video player. Currently I have a button that plays and pauses my video. This is working great. Though I want a visual representation of the play and pause buttons, instead of them staying the same when in the paused state or when the video is playing. I plan on having two seperate images for play and pause.

My problem is that I can't quite get my javascript to toggle my buttons, I'm thinking the best way to toggle the buttons is when one is paused, hide one element and when the video is playing hide the other element.

So here is what I have currently:

function playPause() { 

mediaPlayer = document.getElementById('media-video');

if (mediaPlayer.paused) 
  mediaPlayer.play(); 
$('.play-btn').hide();
else 
  mediaPlayer.pause(); 
$('.pause-btn').hide();

}

Any help is greatly appreciated.

javascriptjquerycsshtmlvideo


Solution 1:[1]

For e.g.: 

function togglePlayPause() {
// If the mediaPlayer is currently paused or has ended
if (mediaPlayer.paused || mediaPlayer.ended) {
    // Change the button to be a pause button
    changeButtonType(playPauseBtn, 'pause');
    // Play the media
    mediaPlayer.play();
}
// Otherwise it must currently be playing
else {
    // Change the button to be a play button
    changeButtonType(playPauseBtn, 'play');
    // Pause the media
    mediaPlayer.pause();
}}

Source: http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473

Solution 2:[2]

/* in Jquery*/

$('#play-pause-button').click(function () { 
   if ($("#media-video").get(0).paused) {
        $("#media-video").get(0).play(); 
     } 
   else {
        $("#media-video").get(0).pause(); 
    }
});

Video is a DOM element not the javascript function;

Solution 3:[3]

Here are two examples, each comes with html, css and js.

const $ = (s, c = document) => c.querySelector(s);
const $$ = (s, c = document) => Array.prototype.slice.call(c.querySelectorAll(s));

function main(){
  /* Example 1 */
  // optional code to trigger click for label when 'Space' key pressed
  $$('label.btn-toggle').forEach((label) => {
    label.addEventListener('keypress', (e) => {
      if(e.key === ' ' || e.code === 'Space'){
        let input = e.target.control;
        if(input){
          input.click();
        }
      }
    });
  });
  $('#btnPlayPause>input[type="checkbox"]').addEventListener('click', (e) => {
    let input = e.target;
    if(input.parentNode.getAttribute('aria-disabled') === 'true'){
      e.preventDefault();
      return;
    }
    if(input.checked){
      // TODO play
      console.log('playing');
    }else{
      // TODO pause
      console.log('paused');
    }
  });
  /* Example 2 */
  $('#btnMuteUnmute').addEventListener('click', (e) => {
    let button = e.target;
    let isOn = button.value==='on';
    if(!isOn){
      // TODO mute
      console.log('muted');
    }else{
      // TODO unmute
      console.log('unmuted');
    }
    button.value = isOn?'off':'on';
  });
}
document.addEventListener('DOMContentLoaded', main);
/* Example 1 */
label.btn-toggle{
  font-size: 13.3333px;
  font-family: sans-serif;
  display: inline-flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: center;
  cursor: default;
  box-sizing: border-box;
  margin: 0px;
  padding: 1px 6px;
  background-color: #efefef;
  color: buttontext;
  border: 1px solid buttonborder;
  border-radius: 2px;
  user-select: none;
}
label.btn-toggle:hover{
  background-color: #dfdfdf;
}
label.btn-toggle:active{
  background-color: #f5f5f5;
}
.btn-toggle>input[type="checkbox"]:not(:checked)~.on-text{
  display: none;
}
.btn-toggle>input[type="checkbox"]:checked~.off-text{
  display: none;
}
#btnPlayPause{
  width: 60px;
  height: 60px;
}

/* Example 2 */
button.btn-toggle[value="on"]::after{
  content: attr(data-on-text);
}
button.btn-toggle[value="off"]::after{
  content: attr(data-off-text);
}
#btnMuteUnmute{
  width: 60px;
  height: 60px;
}
<!-- Example 1 -->
<label id="btnPlayPause" role="button" class="btn-toggle" tabindex="0" title="Play / Pause">
  <input type="checkbox" tabindex="-1" autocomplete="off" hidden aria-hidden="true" />
  <span class="on-text">Pause</span>
  <span class="off-text">Play</span>
</label>

<!-- Example 2 -->
<button id="btnMuteUnmute" type="button" class="btn-toggle"
  value="off" data-on-text="Unmute" data-off-text="Mute" title="Mute / Unmute"></button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 fuweichin

Related Questions