3

現在、Safari で HTML5 ビデオ イベントの問題が発生しています。私は自分のページで 1 つのビデオを再生しています。ビデオが正しく読み込まれ、再生されます。ただし、play イベントは常に発生するとは限りません。ユーザーの場合:

  1. クリック再生
  2. 動画を最後まで見る (終了したイベントが発生する)
  3. クリックしてもう一度再生

再生イベントは、2 回目のクリックでは発生しません。その時点で映画を一時停止/再生すると、正しいイベントが発生します。

動画が完了し、ユーザーがもう一度再生を押した場合、動画タグの再生イベントを発生させるにはどうすればよいですか?

drawVidPlayer は、ページ レンダリングの一部としてビデオ インデックスと共に呼び出されます。

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);     
}
4

2 に答える 2

2

HTML5 では、再生位置がメディア ファイルの最後に達したときに、ブラウザーが、 、およびイベントをスローする必要があることが規定されていますが、その仕様は必ずしも明確ではありませんでした。その結果、この動作はブラウザー間で一貫性がありません。ファイルの終了時にイベントを設定または起動しないものもあります。timeupdatepausedendedpaused=truepaused

あなたの Safari の問題でpausedは、ビデオが 2 回目の再生を開始したときと同じでfalseあるため、ブラウザがplayイベントを再度発生させる理由はありません。

これは Safari 6 では問題にならないかもしれませんが、IE 9 ではまだ問題が発生しています。

次のように、数行のコードでこの問題を簡単に正規化できます。

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

これにより、ビデオが一時停止状態になるため、再生時にイベントが正しくendedスローされます。play

この作業サンプルを IE 9 で試すか、この jsfiddle で私が何を意味するかを確認してください: http://jsfiddle.net/PWnUb/

于 2012-10-13T18:57:18.000 に答える