HTML5 video kontrol düğmelerim neden Javascript ile çalışmıyor?

Question

<video> kullanarak bir proje üzerinde çalışıyorum, harici HTML düğmelerini oynat/duraklat, hızlı geri sarma, hızlı geri sarma ve hızlı ileri sarma JavaScript kullanarak bir video kontrol etmeye çalışıyorum. Düğmeleri istediğim yerde görüyorum, ancak tarayıcıda kullanmaya çalıştığımda, videoyu kontrol etmek için hiçbir şey yapmıyorlar ve oynatma düğmesi duraklatılmaya ve tam tersi olmayacaktır. Saatlerce denedim, yardım için kullanabileceğim bir şey bulmak için tüm Web'e baktım. Bulduğum çoğu çözüm, daha kolay anladığım jQuery kullanıyor, ama ihtiyacım olan şey bu değil. Ben sadece bunu daha iyi anlayabilmem için saf JavaScript kullanarak yapmak istiyorum. Dahil olan mevcut kodum. Onları işe nasıl alabileceğime dair herhangi bir yardım mutluluk duyacaktır!

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. sen (siz kapsam dışına değişkenleri tanımlı
2. tarayıcı video için doğru codec seçelim onları'un içine kapsülledilerfonksiyonu)

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>

hızlı ileri ile iyi şanslar ve diğer yöntemler onload işlevi içinde

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

Taşı dinleyici. Sayfa yüklenene kadar dinleyiciler eklenmeyecek. Bununla birlikte, vanilya JS'yi kullanmak isteyenlere gerek yok.