Html – Using html5 video events on the iPhone, how to tell “Done” button click from a simple pause

htmliphonevideo

I've got a web page for the iPhone that uses the HTML5 video tags. On the iPhone, such embedded videos are played in the native player. I wanted to check when the video had ended and when the user had dismissed the video with the "Done" button. Initially, I tried this:

var video = $("#someVideo").get(0);          
video.addEventListener('ended', myFunction);

But that only fired when the video was allowed to finish. After some playing around with other events (suspend, stalled, waiting) I found that the "Done" button triggers a 'pause' event. However, when I add this:

video.addEventListener('pause', myFunction);

my code is called both from the "Done" button and when the user taps the pause button in the playback controls. The second case is undesirable; I only want the first case, but the events don't seem to be giving me enough information.

Does anyone know of a way to tell when the user has hit the "Done" button in the iPhone player (versus simply pausing)?

Best Answer

Just check the webkitDisplayingFullscreen boolean in your pause function. Pressing Done or Pause triggers the pause event, but Done does a wee bit extra like an exit from full screen mode. Doing that check will help you differenciate the 2 button presses. Some sample code below.

<script>
var html5Video = function() {
    return {
        init: function() {
            var video = document.getElementsByTagName('video')[0];
            video.addEventListener('ended', endVideo, false);
            video.addEventListener('pause', pauseVideo, false);
        }
    };
}();

function endVideo() { 
    alert("video ended");
}

function pauseVideo() { 
    var video = document.getElementsByTagName('video')[0];
    if (!video.webkitDisplayingFullscreen)
        endVideo(); 
}

html5Video.init();

</script>
Related Topic