Question

此网站提供的代码段并不完美。我怀疑在从我的页面复制和粘贴时我错过了一些东西。但我希望有人能指导我做我需要做的事情。

我加载了一个视频文件
我播放视频
另一个函数计算并设置变量nextVeh
当视频播放时间（currentTime）超过nextVeh值时，我想暂停视频并切换播放按钮以显示已暂停

如何在duringPlayback功能中执行此操作？我没有搞清楚。我一定会感激一些帮助。

提前致谢，安德鲁

＆＃13;

if (video.canPlayType) {   // tests that we have HTML5 video support
  //  play video
  function vidplay(evt) {
    if (video.src == "") {  // inital source load
      getVideo();
    }
    button = evt.target; //  get the button id to swap the text based on the state                                    
    if (video.paused) {   // play the file, and display pause symbol
      video.play();
      button.textContent = "||";
    } else {              // pause the file, and display play symbol  
      video.pause();
      button.textContent = ">";
    }
  }
//  load video file from input field
  function getVideo() {
    var fileURL = document.getElementById("videoFile").value;  // get input field                    
    if (fileURL != "") {
      video.src = fileURL;
      video.load();  // if HTML source element is used
      //document.getElementById("btn_play").click();  // start play
      video.controls = false; //defaults display of video controls to off
    } else {
      errMessage("Enter a valid video URL");  // fail silently
    }
  }
}

//  Play
document.getElementById("btn_play").addEventListener("click", vidplay, false);

var nextVeh;
nextVeh = 10; // this is normally set in another function
function duringPlayback() {
  document.getElementById("elapsed").innerHTML = (Math.round(video.currentTime * 100) / 100).toFixed(2);
  if (video.currentTime > nextVeh) {
    document.getElementById("btn_play").click();
    // not understanding what to do here to pause video and toggle the button to paused
  }
};

＆＃13;

<span>Enter a video URL<br />
  <button id="btn_loadVideo" style="float: left" title="Load video button">Load</button>
  <label for:"videoFile">
    <input type="text" id="videoFile" style="width: 400px;" title="video file input field" />
  </label>
</span>
<div>
  <div>
    <video id="video" class="left" controls style="border: 1px solid blue;" height="240" width="320" title="video element"></video>
    <br />
    <button id="btn_play" title="Play">&gt;</button>
    <span>Playback position: <span id="elapsed"></span></span>
  </div>
</div>

＆＃13;

Answer 1

知道了！简单。我只是试着猜测。正如我之前提到的，video.pause成功暂停了视频。但它会使播放/暂停按钮不同步，并导致事件按钮正常工作的问题。我不认为更改canPlayType和vidplay之外的button.textContent会起作用，但确实如此！（我不明白为什么/为什么，但我会接受它。）我甚至不必为按钮调用elementId。（同样，我不明白为什么/为什么，但我会接受它。）

if (video.currentTime > nextVeh) {
        console.log("currentTime > nextVeh");
        video.pause();            //THIS WORKS!
        button.textContent = ">"; //THIS WORKS!
        // do more stuff
    } else {
        // do something
        console.log("currentTime < nextVeh");
    }

暂停视频和切换按钮

1 个答案: