HTML5のビデオコントロールボタンがJavascriptで動作しないのはなぜですか？

Question

私は<video>を使ってプロジェクトに取り組んでいます。外部HTMLボタンの再生/一時停止、ゆっくりと巻き戻し、巻き戻しを高速にし、JavaScriptを使ってビデオを早送り制御しようとしています。私は彼らが欲しい場所にボタンを表示していますが、ブラウザでそれらを使用しようとすると、ビデオを制御するための何もしません。また、再生ボタンは一時停止に切り替わりません。私は何時間も努力してきました。私は助けてくれるものを見つけるためにウェブ全体を見ています。私が見つけたほとんどのソリューションは、理解しやすいjQueryを使用していますが、私が必要とするものではありません。私は純粋なJavaScriptを使用してそれをしたいので、私はそれをよく理解することができます。私の既存のコードが含まれています。どのように私がそれらを働かせることができるかに関するどんな助けも高く評価されるでしょう！

HTML：

<script src="sample.js"></script> 

<div class="jumbotron"> 
    <div class="container"> 
     <video id="video" poster="images/art/preview.png" width="100%" controls> 
      <source src="images/art/sample.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""> 
       <source src="images/art/sample.webm" type="video/webm; codecs="vp8, vorbis""> 
        <source src="images/art/sample.ogv" type="video/ogg; codecs="theora, vorbis""> 
    Your browser does not support HTML5 video 

        </video> 
        <div id="buttonbar"> 
         <button type="button" id="fastBck"> 
          <span class="glyphicon glyphicon-fast-backward"></span> 
         </button> 
         <button type="button" id="rew"> 
          <span class="glyphicon glyphicon-backward"></span> 
         </button> 
         <button type="button" id="play-pause"> 
          <span class="glyphicon glyphicon-play"></span> 
         </button> 
         <button type="button" id="fastFwd"> 
          <span class="glyphicon glyphicon-fast-forward"></span> 
         </button> 
        </div> 
       </div> 
      </div> 

はJavaScript：

window.onload = function() { 
    var video = document.getElementById("video"); 
    var playButton = document.getElementById("play-pause"); 
    var rewButton = document.getElementById("rew"); 
    var fastBckButton = document.getElementById("fastBck"); 
    var fastFwdButton = document.getElementById("fastFwd"); 
} 

playButton.addEventListener("click", function(){ 

    if (video.paused==true) { 
     video.play(); 
     playButton.className="glyphicon glyphicon-pause"; 
    } else{ 
     video.pause(); 
     playButton.className="glyphicon glyphicon-play"; 
    } 
}) 

rewButton.addEventListener("click", function(){ 
    //not sure exactly how to use currentTime to rewind, or fast forward 
}) 

Answer 1

1. あなたは（あなたがスコープ外にあなたの変数を定義し
2. ブラウザは動画の右のコーデックを選択しましょうの中にそれらをカプセル化しました機能）

window.onload = function() { 
 
    var video = document.getElementById("video"); 
 
    var playButton = document.getElementById("play-pause"); 
 
    var rewButton = document.getElementById("rew"); 
 
    var fastBckButton = document.getElementById("fastBck"); 
 
    var fastFwdButton = document.getElementById("fastFwd"); 
 

 
    playButton.addEventListener("click", function(){ 
 

 
    if (video.paused===true) { 
 
     video.play(); 
 
     playButton.className="glyphicon glyphicon-pause"; 
 
    } else{ 
 
     video.pause(); 
 
     playButton.className="glyphicon glyphicon-play"; 
 
    } 
 
    }); 
 

 
    rewButton.addEventListener("click", function(){ 
 
    //not sure exactly how to use currentTime to rewind, or fast forward 
 
    }); 
 
};

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

<div class="jumbotron"> 
 
    <div class="container"> 
 

 
    <video id="video" width="100%" controls> 
 
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> 
 
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm"> 
 
     <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg"> 
 
     Your browser does not support HTML5 video 
 
    </video> 
 
    <div id="buttonbar"> 
 
     <button type="button" id="fastBck"><span class="glyphicon glyphicon-fast-backward"></span></button> 
 
     <button type="button" id="rew"><span class="glyphicon glyphicon-backward"></span></button> 
 
     <button type="button" id="play-pause"><span class="glyphicon glyphicon-play"></span></button> 
 
     <button type="button" id="fastFwd"><span class="glyphicon glyphicon-fast-forward"></span></button> 
 
    </div> 
 
    
 
    </div> 
 
</div>

のonload関数内で早送りしたり、他の方法

Answer 2

window.onload = function() { 
     var video = document.getElementById("video"); 
     var playButton = document.getElementById("play-pause"); 
    var rewButton = document.getElementById("rew"); 
    var fastBckButton = document.getElementById("fastBck"); 
    var fastFwdButton = document.getElementById("fastFwd"); 
playButton.addEventListener("click", function(){ 
if (video.paused==true) { 
    video.play(); 
    playButton.className="glyphicon glyphicon-pause"; 
    } else{ 
     video.pause(); 
     playButton.className="glyphicon glyphicon-play"; 
    } 
    })     
    rewButton.addEventListener("click", function(){ 
     //not sure exactly how to use  
     currentTime to rewind, or fast forward 
    }) 
} 

移動リスナーとの幸運。リスナーは、ページがロードされるまで添付されません。バニラJSの使い方を尊重する