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 
 
}