爲視頻創建自定義「播放」按鈕

Question

這是我現在的主要標記。

<div id="video_container"> 
    <video id="video"> 
     <source src="popeye_patriotic_popeye.mpeg" type="video/mp4"> 
    </video> 

</div> 
<button type="button" id="play_button">Play</button> 

基本上我們有視頻框，以及「播放」按鈕。我想知道如果通過javascript，它可能會允許此按鈕播放/暫停視頻。我不確定這是否可行，但如果是這樣，請讓我知道我將如何去做。

謝謝

Answer 1

這很容易在JavaScript中完成，它實際上很基礎。

此代碼波紋管會做只爲你：

var playButton = document.getElementById("play_button"); 
// Event listener for the play/pause button 
playButton.addEventListener("click", function() { 
    if (video.paused == true) { 
    // Play the video 
    video.play(); 

    // Update the button text to 'Pause' 
    playButton.innerHTML = "Pause"; 
    } else { 
    // Pause the video 
    video.pause(); 

    // Update the button text to 'Play' 
    playButton.innerHTML = "Play"; 
    } 
});