为视频创建自定义“播放”按钮

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