Using html5 video events on the iPhone, how do I tell "Done" button click from a simple pause?
html, iphone, video
Solution
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>
Problem
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)?