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 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)?

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

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?