Geek asks and answers

HTML5 Video - Play no burning

I currently have an issue with the HTML5 video call in Safari. I play one video on my page. The video loads and plays correctly. However, a game event does not always fire. If user:

  • Press play button
  • Play the video to the end (completed events)
  • Click replay

The playback event does not fire the second time it is pressed. If I pause / play a movie at this time, the correct events fire.

How can I make a video tag event if the video ends and the user clicks the play button again?

**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);     
}
+3
source share
2 answers

HTML5 , timeupdate, paused ended, , . . paused=true paused, .

Safari paused - false, - play.

Safari 6, - IE 9. " " from longtailvideo.com - .

- :

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

ended, play .

IE 9 , jsfiddle: http://jsfiddle.net/PWnUb/

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

, .

+2

More articles:


All Articles