Using html5 video events on the iPhone, how do I tell “Done” button click from a simple pause?

Question

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 end

Answer 1

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>

Answer 2

There is an event called "ended" that you should probably use, see http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#event-media-ended .

Answer 3

This is what you need:

yourplayer.addEventListener('webkitendfullscreen', onPlayerExitFullscreen, false);

And vice versa

yourplayer.addEventListener('webkitbeginfullscreen', onPlayerEnterFullscreen, false);

Here's another answer to your question that I found: How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?