HTML5视频与JavaScript - 语法混淆

Question

我想制作一个自定义视频。我可以让我的功能工作。但是，当我将两个事件监听器放在一起时：

例如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() }; 

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

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

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

此外，对于addEventListener（一个布尔）表明是否要回调在捕获阶段（true）或冒泡阶段（false）火了第三个参数。需要捕获阶段（在IE 9之前IE不支持它）很不寻常，因此您可能想要将现有的true值修改为false，或者只是省略第三个参数，因为false是默认值。

这里的工作的例子，实际上显示了3个事件处理程序都绑到timeupdate事件（请务必在片段窗口向下滚动才能看到该消息）：

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

video { width:40%; }

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

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 
 
}