2012-10-24 58 views
1

我有一個html文件,我想通過視頻播放器控制視頻播放器的暫停/播放。意思是,當我點擊視頻播放器中的播放按鈕時,它會暫停,並且它應該顯示一條提示,說明視頻已暫停。 html checkpause按鈕工作正常,現在如何用視頻播放器做到這一點?我已經寫了下面的代碼,但是警報沒有彈出。出了什麼問題?如何在視頻播放器暫停事件期間獲取消息?

<!DOCTYPE html> 

<html> 

<body> 


<center> 
<button onclick="enableLoop()" type="button">Enable loop</button> 

<button onclick="disableLoop()" type="button">Disable loop</button> 

<button onclick="checkLoop()" type="button">Check loop status</button> 

<button onclick="checkended()" type="button">Check end status</button> 

<button onclick="checkpause()" type="button">Check pause status</button> 

<br /> 


<video id="video" controls="controls" > 

    <source src="http://www.w3schools.com/html5/mov_bbb.mp4" type="video/mp4" > 

    <source src="http://www.w3schools.com/html5/mov_bbb.ogg" type="video/ogg" > 

    Your browser does not support HTML5 video. 

</video> 

</center> 

<script> 
var media_events = new Array(); 
media_events["play"] = 0; 
media_events["pause"] = 0; 

document._video = document.getElementById("video"); 
//document._video.autoplay=true; 
document._video.load(); 
//document._video.play(); 
//alert ("Video started"); 

function init(){ 
    alert("at init function"); 
//init_events(); 
    //alert("Value of key in init_events is:" + key + ""); 
    for (key in media_events) { 
    //alert("Value of key in init_events is:" + key + ""); 
    document._video.addEventListener(key, capture, false); 
    } 
    var tbody = document.getElementById("events"); 
    for (key in media_events) { 
     alert("Status of Video is :" + key + ""); 
    } 
} 

document.addEventListener("DOMContentLoaded", init, false); 

//Media Events. 

function init_events() { 
    alert("Value of key in init_events is:" + key + ""); 
    for (key in media_events) { 
    document._video.addEventListener(key, capture, false); 
    } 
    for (key in media_events) { 
     //var output = document.createElement(""); 
     //output.textContent += "Key value is:" + key + ""; 
     alert("Final status of Video is :" + key + ""); 
    } 
} 



function capture(event) { 
    //alert("At capture func and key value is " + key + ""); 
    media_events[event.type] = media_events[event.type] + 1; 
    alert("Media Event type is" + media_events[event.type] + ""); 
    for (key in media_events) { 
    alert("At capture func and key value is " + key + ""); 
    var e = document.getElementById("e_" + key); 
    //alert("Value of e is:" + e + ""); 
    if (e) { 
     e.innerHTML = media_events[key]; 
     if (media_events[key] > 0) { 
      e.className = "true"; 
      alert("Value is " + key + ""); 
     } 
     else{ 
      alert("Value in else is " + key + ""); 
      e.className = "false"; 
      alert("Value is key in 'e' else is " + key + ""); 
     } 
    } 
    else{ 
    alert("Value of key in else is " + key + ""); 
    } 

} 
} 

function enableLoop() 

    { 

    document._video.loop=true; 

    document._video.load(); 

    } 

function disableLoop() 

    { 

    document._video.loop=false; 

    document._video.load(); 

    } 

function checkLoop() 

    { 

    alert(document._video.loop); 

    } 

function checkended() 

    { 

    alert(document._video.ended); 

    } 

    function checkpause() 

    { 

    if (document._video.paused) { alert("video is in pause"); } 
    else{ 
    alert("Video is not paused");} 

    } 

</script> 
</body> 
</html> 

回答

0

而不是對「捕獲」中觸發的事件做出反應,您似乎正在循環所有可能的事件並對它們做出反應。

此示例顯示了應對各種事件的簡單的,輕量級的方式 - 我建議修改它來跟蹤播放/暫停標誌https://gist.github.com/3718414

function capture(e) { 
if (e.type == "pause") { 
    document._video.paused = true; 
} else if (e.type == "play") { 
    document._video.paused = false; 
} 
    checkpause(); 
}