HTML5ビデオ - 再生イベントが発生しない

Question

現在、SafariでHTML5ビデオイベントの問題が発生しています。私は自分のページで1つのビデオを再生しています。動画が正しく読み込まれて再生されます。ただし、プレイイベントは必ずしも発生するわけではありません。ユーザーの場合：

1. クリック数は
2. クリック数が再び

プレイイベントが第二のクリックで発生しません遊ぶ最後までビデオ（終了イベントが発生します）

時計を果たしています。その時に映画を一時停止/再生すると、正しいイベントが発生します。

ビデオが完了し、ユーザーがもう一度再生を押すと、ビデオタグの再生イベントが発生するようにするにはどうすればよいですか？

**drawVidPlayer is called with the videos index as part of the page render 

function drawVidPlayer(vindex){ 
    var turl=vidList[vindex]['thumbUrl']; 
    var vurl=vidList[vindex]['url']; 
    var valias=vidList[vindex]['type']; 
    destroyVidPlayer(); 
    $('#mediaspot').css('backgroundColor', '#000000'); 
    $('#mediaspot').show(); 
    $('#mediaspot').html('<video controls="controls" id="twnvideo" poster="'+turl+'" style="height:225px; width:460px;"><source src="'+vurl+'" type="video/ogg" /><source src="'+vurl+'" type="video/mp4" /><source src="'+vurl+'" type="video/webm" />Your browser does not support the video tag.</video>').appendTo('#wrap_media_vod'); 
    var velem=document.getElementsByTagName('video')[0];  
    velem.addEventListener('play', initVidTimer, false); 
    velem.addEventListener('pause', killVidTimer, false); 
    velem.addEventListener('ended', killVidTimer, false); 
}  
function destroyVidPlayer(){ 
    var velem=document.getElementsByTagName('video')[0]; 
    if(velem!=undefined){ 
     velem.removeEventListener('play', initVidTimer); 
     velem.removeEventListener('pause', killVidTimer); 
     velem.removeEventListener('ended', killVidTimer); 
    } 
    $('#mediaspot').empty(); 
    $('#mediaspot').html(''); 
} 
function initVidTimer(){ 
    if(activityTimer==null){ 
     external.OnUserActivity(19); 
     activityTimer=setInterval(function(){ 
      external.WriteLog('activity timer running'); 
      external.OnUserActivity(19); 
     }, 5000); 
    } 
} 
function killVidTimer(){ 
    clearInterval(activityTimer);  
    activityTimer=null; // Kill keepAlive timer 
    var velem=document.getElementsByTagName('video')[0]; 
    external.WriteLog(velem.ended);  
}  

Answer 1

HTML5は現在再生位置がメディアファイルの終わりに達したときに、ブラウザがtimeupdate、paused、およびendedイベントをスローしなければならないことを指定しますが、仕様は常にその明確ではありませんでした。その結果、この動作はブラウザ間で矛盾します。一部の人はpaused=trueを設定しないか、ファイルが終了したときにpausedイベントを発生させません。ビデオは二度目の再生を開始すると、あなたのSafariの問題で

は、pausedはまだfalseに等しいです - ので、ブラウザは再びplayイベントを発生させるための理由はありません。

これはもはやサファリ6で問題ないかもしれないが、それはまだlongtailvideo.comからthis chartで終了イベント欄を見てみましょう9. IEで破る - 彼らはよく矛盾の概要を説明します。

それは数行のコードでこの問題を正常化するのは簡単だろうが - このように：

$("video").on("ended", function() { 
    if (!this.paused) this.pause(); 
}); 

これはendedに一時停止状態でビデオを置くので、リプレイに正しくplayイベントがスローされます。

あなたはIE 9でこのワーキングサンプルを試すことができますか私はこのjsfiddleに何を意味するかを見るために：http://jsfiddle.net/PWnUb/

Answer 2

私は同じ問題を持っていた、私はjqueryののビットで解決：

function videoend(){ 
    var duration = $("video").get(0).duration; 
    var current = $("video").get(0).currentTime; 

    if(current==duration){ 
     //Whatever you wanna do when video ends 
    }; 
} 

$(document).ready(function(){ 
    setInterval("videoend()", 200); //or any other time you wanna use 
}); 

・ホープこれは役に立ちます。