CODEWITHSUNDEEP
javascriptjquerycsshtmlvideo
rowefx
rowefx

Reputation: 265

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.

Upvotes: 1

Views: 21989

Answers (4)

fuweichin
fuweichin

Reputation: 1900

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>

Upvotes: 1

Sheelpriy
Sheelpriy

Reputation: 1745

/* 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;

Upvotes: 0

innuendomaximus
innuendomaximus

Reputation: 353

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

Upvotes: 2

ChoiZ
ChoiZ

Reputation: 732

You need to use more Braces '{}' in if and else

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

I think it's works well.

Upvotes: 6

Related Questions