HTML5 Javascript播放/暫停按鈕

-1

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

我的問題是，我不能完全得到我的JavaScript切換我的按鈕，我想切換按鈕的最佳方式是當一個人暫停，隱藏一個元素，當視頻播放時隱藏其他元件。

因此，這裏是我目前：

function playPause() { 

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

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

}

任何幫助是極大的讚賞。

來源

2013-12-16 rowefx

它只是一個錯字或你的'的if/else statement'是wrooooong？（你需要添加'{}'來包裝'if'和'else'塊） – BeNdErR

不應該在if語句中使用$（'。play-btn'）。hide（）與'else'中的暫停按鈕相同嗎？ – Andrew

你錯過了if else語句的花括號。 – Terry

你需要，如果使用多個支架「{}」和其他

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

我認爲這是行之有效的。

來源

2013-12-16 17:06:53 ChoiZ

另外，取決於範圍，OP可能建議使用'var mediaPlayer = ...'來代替。 – Terry

是的@Terry它的更新感謝 – ChoiZ

謝謝，我認爲語法有點不合適！ – rowefx

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

來源

2015-08-13 07:58:03 sheelpriy

對於例如爲：

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

來源

2015-08-13 08:01:12

很高興您在此處添加了代碼！我也建議有一個解釋總是有幫助的。您的評論在顯示每行內容的功能方面做得很好，但在代碼塊外部進行一些解釋也很有幫助。 – SuperBiasedMan

HTML5 Javascript播放/暫停按鈕

回答

相關問題