Warum funktionieren meine HTML5-Steuerschaltflächen nicht mit Javascript?

Question

Ich arbeite an einem Projekt mit <video>, versuchen, externe HTML-Schaltflächen spielen/pausieren, zurückspulen, schnell zurückspulen und vorspulen ein Video mit JavaScript. Ich habe die Tasten, wo ich sie haben will, aber wenn ich versuche, sie im Browser zu verwenden, tun sie nichts, um das Video zu steuern, und die Play-Taste schaltet nicht auf Pause und umgekehrt. Ich habe stundenlang versucht, im ganzen Web nach etwas zu suchen, mit dem ich helfen kann. Die meisten Lösungen, die ich finde, verwenden jQuery, von dem ich weiß, dass es einfacher ist, aber es ist nicht das, was ich brauche. Ich möchte es nur mit reinem JavaScript machen, damit ich es besser verstehen kann. Enthalten ist mein bestehender Code. Jede Hilfe, wie ich sie zur Arbeit bringen kann, wäre willkommen!

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. lassen Sie den Browser, um die richtigen Codecs für Video auswählen
2. Sie Ihre Variablen definiert den Gültigkeitsbereich (Sie habe sie in dereingekapseltFunktion)

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>

Viel Glück mit dem schnellen Vorlauf und Ihre anderen Methoden

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

Verschieben Zuhörer innerhalb onload Funktion. Listener werden erst angehängt, wenn die Seite geladen ist. Respekt für den Gebrauch von Vanille JS, wie auch immer unnötig.