HTML5ビデオとjavascript - 構文の混乱

Question

私はカスタムビデオを作ろうとしています。私は機能するように働くことができます。しかし、私は2人のイベントリスナーを一緒に持っている：

video.ontimeupdate

動画を再生すると、下の動画のみが動作します。この問題がないように、私の関数を書くための良い方法がありますか？

function progressBarUpdate() { 

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

Answer 1

イベントハンドラを登録するための2つの異なるJavaScriptのメカニズムがあります：あなたはそれに価値を与える

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

、プロパティ（ontimeupdate）を使用するとは、その値になりますそのプロパティを別の値に設定すると上書きされます。 addEventListener

を使用しています

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

を起きてからこれを防ぐために、より近代的なを使用W3C DOM Level 2 event handling model：

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

それは、この後のことで上書きされます：あなたがこれを行うときに、

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

これは両方の関数をtimeupdateイベントへのコールバックとして登録します。

また、あなたはコールバックが、キャプチャ段階（true）またはバブリング段階（false）の間に発射するかどうかを示すaddEventListener（ブール値）のための三番目のパラメータがあります。キャプチャフェーズが必要なのはむしろ珍しいことです（IE 9ではIEではサポートされていません）ので、既存のtrueの値をfalseに変更するか、デフォルトのfalseという3番目の引数を省略してください。

ここでは、実際にすべてのtimeupdateイベント（メッセージを表示するスニペットのウィンドウで、下にスクロールしてください）に縛ら3つのイベントハンドラを示し作業例です：

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プログレスバー機能の更新

イベントリスナー

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

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

機能コード例

// window.onloadに似ています。それらは更新されるプロパティです。最新の関数定義が実行されます。ここでwindow.onload構文を使用して、問題を示すスニペットあるaddEventListener()

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

使用してください。

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