Question

我有一个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>

Answer 1

而不是对“捕获”中触发的事件作出反应，而不是对所有可能的事件进行循环并对它们作出反应。

此示例显示了一种简单，轻量级的方式来响应不同的事件 - 我建议修改它以跟踪播放/暂停标记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();
}

如何在视频播放器暂停活动期间收到消息？

1 个答案: