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

1 回答 1

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();
}
于 2012-10-25T22:23:27.047 回答