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

score 20 · Answer 1 · edited May 23 '17 at 12:02

20

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?

edited May 23 '17 at 12:02

Community

1
1

answered Nov 16 '12 at 02:13

Rex

454
4
5

score 20 · Answer 2 · answered Mar 10 '11 at 13:20

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>

just note this attribute is only available in recent iOS release. — Du Song, May 06 '11 at 19:51
This works if you play the video and then press 'Done' while the video is playing - but if you pause the video and then press 'Done' it doesn't trigger... EDIT: saw there's a follow-up question: http://stackoverflow.com/questions/11112150/with-an-html5-video-element-on-the-iphone-how-can-i-detect-the-difference-betwe?lq=1 — Yuval A., Aug 20 '12 at 13:26

score -2 · Answer 3 · answered Jun 23 '10 at 14:44

-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 .

answered Jun 23 '10 at 14:44

Silvia

543
5
5

Thanks, but as I mentioned, I initially tried 'ended', but it only triggers when the video is allowed to play to completion. Clicking "Done" is not the same. – jak Jun 23 '10 at 15:00

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

3 Answers3

Linked