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

让浏览器为您的视频选择合适的编解码器
您将变量定义在范围之外（您已将它们封装在onload函数中）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

祝你快进和其他方法好运

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

在onload函数中移动侦听器。在加载页面之前，听众不会被附加。尊重想要使用香草JS，但不必要。

为什么我的HTML5视频控制按钮不能与Javascript一起使用？

2 个答案: