视频播放/暂停按钮功能

时间:2016-11-24 07:15:27

标签: javascript html5 html5-video

我正在尝试制作自定义视频播放器。我开始让播放/暂停按钮工作,但事实并非如此。有谁知道我错过了哪些步骤?

HTML5

<!--Embedded Video -->
  <div id="video-container">  

      <video height="500" width="620" id="video1"> 

          <source src="video/video2.ogg" type="video/ogg" class="video" />

          <source src="video/video1.mp4" type="video/mp" class="video" />

         <track label="English" id="captions" kind="subtitles" srclang="en" src="video/captions.vtt" default />

     </video>

   </div>   
<!--Video Controls --> 

的Javascript

 //video variables    
var video = document.getElementById("video1");

//button variables 
var playButton = document.getElementById("play_pause");    

//event listeners 
playButton.addEventListener("click", playPause, true); 
window.onload = initializeVideo;
function playPause() {
   if (video.paused === true){
        video.play();
    } else {
        video.pause();
      playButton.innerHTML = "<img src="icons/play-icon.png alt="playButton">"
    }    
}

0 个答案:

没有答案