为什么'我的HTML5视频控制按钮使用Javascript

Why aren't my HTML5 video control buttons working with Javascript?

本文关键字：按钮 控制 Javascript 视频 HTML5 我的 为什么      更新时间：2023-09-26

我正在使用<video>进行一个项目，试图使用JavaScript使外部HTML按钮播放/暂停、慢速倒带、快速倒带和快进控制视频。我的按钮出现在我想要的地方，但当我试图在浏览器中使用它们时，它们不会对视频进行任何控制，播放按钮也不会切换到暂停，反之亦然。我已经试了好几个小时了，在网上到处寻找可以帮助我的东西。我发现的大多数解决方案都使用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
})
  1. 让浏览器为您的视频选择合适的编解码器
  2. 您定义了超出范围的变量（已将它们封装在onload函数中）

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>

祝你好运快进和你的其他方法

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，尽管没有必要。

相关文章：