Question

我正在尝试制作自定义视频。我可以让我的功能发挥作用。但是当我有两个事件监听器时：

e.g。 video.ontimeupdate

播放视频时，只有底部才能播放。有没有更好的方法来编写我的函数，以便我没有这个问题？

事件监听器

time.addEventListener("timeupdate", currentTime, true);
video.ontimeupdate = function() {currentTime()};

seek.addEventListener("timeupdate", progressBarUpdate, true);
video.ontimeupdate = function() {progressBarUpdate()};

功能代码示例

//更新进度条功能

function progressBarUpdate() {

            // Calculate the progress bar value
            var value = (100 / video.duration) * video.currentTime;
            // Update the progress bar value
            seek.value = value;
        }

Answer 1

注册事件处理程序有两种不同的JavaScript机制：

time.addEventListener("timeupdate", currentTime, true);  // W3C DOM Standard
video.ontimeupdate = function() { currentTime() };         // Event handling property

当您使用属性（ontimeupdate）并给它一个值时，当您将该属性设置为另一个值时，该值将被覆盖。

所以，当你这样做时：

video.ontimeupdate = function() {currentTime()};

稍后会被覆盖：

video.ontimeupdate = function() { progressBarUpdate() };

要防止这种情况发生，请使用使用addEventListener的更现代的 W3C DOM Level 2 event handling model

 video.addEventListener("timeupdate", currentTime);
 video.addEventListener("timeupdate", progressBarUpdate);

这会将这两个函数注册为timeupdate事件的回调。

此外，还有addEventListener的第三个参数（布尔值），表示您是否希望在捕获阶段（true）或冒泡阶段（false）期间触发回调。）。需要捕获阶段是非常不寻常的（在IE 9中它不受IE支持），因此您可能希望将现有的true值修改为false或者只是省略第三个参数为false是默认值。

这是一个工作示例，实际上显示了3个事件处理程序都绑定到timeupdate事件（确保在代码段窗口中向下滚动以查看消息）：

＆＃13;

var videoElement = null;
var current = null
var duration = null;
var div1, div2;

window.addEventListener("DOMContentLoaded", function(){
  // Get DOM References to media element:
  videoElement = document.getElementById('bikeSafe');

  // ...to video span elements:
  current = document.getElementById('current');
  duration = document.getElementById('duration');
  div1 = document.getElementById("timeUpdate1");
  div2 = document.getElementById("timeUpdate2");

  // Wire Up Video to use its API:
  videoElement.addEventListener("play", setCounter);
  videoElement.addEventListener("ended", endVideo);
  videoElement.addEventListener("durationchange", updateStatus);
  videoElement.addEventListener("timeupdate", setCounter);
  videoElement.addEventListener("timeupdate", updateDiv1);
  videoElement.addEventListener("timeupdate", updateDiv2);
});

// Video API:

function updateDiv1(){ div1.innerHTML = "Hello from timeupdate event handler!" }
function updateDiv2(){ div2.innerHTML = "Hello from different timeupdate event handler!" }

// Set the value for the current position in the video
function setCounter() {
  // This function is wired up to the video element's timeupdate event, which
  // fires when the current time value changes.
  current.innerHTML = (videoElement.duration - videoElement.currentTime).toFixed(3);
}

function endVideo() {
  // Reset video back to beginning when it ends
  videoElement.currentTime = 0;
};

function updateStatus() {
  // This will fire when the video's durationchange event fires
  // and that will happen upon the successful loading of the image
  // for the first time when it becomes known how long the duration
  // of the video is.
  current.innerHTML = videoElement.duration.toFixed(3);
  duration.innerHTML = videoElement.duration.toFixed(3);
};

＆＃13;

video { width:40%; }

＆＃13;

<video id="bikeSafe" width="400" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <p>Your browser does not support HTML5 video.</p>
</video>
<p>
  Time Remaining: <span id="current"></span> | 
  Total Length: <span id="duration"></span>
</p>
      
<div id="timeUpdate1"></div>
<div id="timeUpdate2"></div>

＆＃13;

Answer 2

video.ontimeupdate与window.onload类似。它们是更新的属性。将执行它们的最新函数定义。使用addEventListener()

video.addEventListener("timeupdate", currentTime, true);
video.addEventListener("timeupdate", progressBarUpdate, true);

以下是显示使用window.onload语法问题的代码段。

window.onload = function(){
  console.log('Window loaded #1'); // Will not excecute
}
window.onload = function(){
  console.log('Window loaded #2'); // Window loaded #2
}

带有javascript的HTML5视频 - 语法混乱

2 个答案: