1

ビデオプレーヤーを介してビデオプレーヤーの一時停止/再生を制御したいhtmlファイルがあります。つまり、ビデオ プレーヤーの再生ボタンをクリックすると一時停止し、ビデオが一時停止されたことを示すアラートが表示されます。HTML チェック一時停止ボタンは正常に機能していますが、ビデオ プレーヤーでどのように行うのですか? 以下のコードを書きましたが、アラートがポップアップしません。何がうまくいかないのですか？

<!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 に答える