javascript - 暂停视频和切换按钮

Question

该网站提供的代码片段不能完美运行。我怀疑我在从页面复制和粘贴时遗漏了一些内容。但我希望有人能够为我需要做的事情提供指导。

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

如何在 whilePlayback 函数中执行此操作？我不明白。我肯定会感谢一些帮助。

提前致谢，安德鲁

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

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

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