HTML5 Javascript播放/暂停按钮

HTML5 Javascript Play/Pause button

本文关键字：暂停 按钮 播放 Javascript HTML5      更新时间：2023-09-26

我正在尝试自定义视频播放器上的控制按钮。目前我有一个按钮可以播放和暂停我的视频。这很有效。尽管我想要播放和暂停按钮的视觉表示，而不是在暂停状态或视频播放时保持不变。我计划有两个单独的图像播放和暂停。

我的问题是，我无法让我的javascript切换我的按钮，我认为切换按钮的最佳方式是当一个按钮暂停时，隐藏一个元素，当视频播放时隐藏另一个元素。

以下是我目前拥有的：

function playPause() { 
mediaPlayer = document.getElementById('media-video');
if (mediaPlayer.paused) 
  mediaPlayer.play(); 
$('.play-btn').hide();
else 
  mediaPlayer.pause(); 
$('.pause-btn').hide();
}

非常感谢您的帮助。

您需要在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();
    }
}

我觉得效果很好。

例如：

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

来源：http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473

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

视频是DOM元素，而不是javascript函数；

这里有两个例子，每个例子都带有html、css和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>

相关文章：