HTML5 Javascript 播放/暫停按鈕

Question

我正在嘗試自定義視頻播放器上的控制按鈕。 目前我有一個按鈕可以播放和暫停我的視頻。 這很好用。 雖然我想要播放和暫停按鈕的視覺表示，而不是在暫停狀態或視頻播放時它們保持不變。 我計划有兩個單獨的圖像用於播放和暫停。

我的問題是我不能完全讓我的 javascript 來切換我的按鈕，我認為切換按鈕的最佳方式是當一個暫停時，隱藏一個元素，當視頻播放時隱藏另一個元素。

所以這是我目前所擁有的：

function playPause() { 

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

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

}

任何幫助是極大的贊賞。

Answer 1

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

我認為它運作良好。

Answer 2

例如：

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

Answer 3

/* 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 函數；

Answer 4

這里有兩個例子，每個都帶有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>