Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

With an HTML5 video element on the iphone, how can I detect the difference between "pause" and "done"?

This is an extension of this question

According to my research, for a video element on an iPhone/iPad, pressing both "Done" and "Pause" triggers a "pause" event. So if I have some desired webpage behavior that I want to initiate upon pressing the "done" button, I need to listen for the "pause" event.

player = document.getElementById('videoplayer');
player.addEventListener("pause", function() {
   //desired "done button" behavior defined here
}, false);

According to Arv-ToolTwist's answer to that original question, the way one differentiates between "done" and "pause" is by checking for the webkitDisplayingFullscreen boolean (since the "done" button exits out of fullscreen, the boolean will return false).

player.addEventListener("pause", function() {
   if(!player.webkitDisplayingFullscreen) {
      //desired "done button" behavior defined here
   }
}, false);

However, in the case where a user pauses the video while the player is in fullscreen mode and then presses "done" while the video is paused, the "desired done button behavior" is not initiated.

My research is turning up little-to-no information on this, but my assumption is that either the "pause" event is not getting triggered a second time, or it gets triggered a second time prior to the webkitDisplayingFullscreen boolean changing to "false". Either way, the device can tell the difference between both "done" and "pause" (even when the player is already paused), so I'm wondering

  1. how the device tells the difference, and
  2. whether there's a way to detect when the player exits the fullscreen mode, so that even when the player is already paused, pressing the "done" button is still detected and the desired behavior still gets initiated.
like image 327
Scott Avatar asked Jun 20 '12 02:06

Scott


1 Answers

This is the event your looking for:

player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);

This event does indeed fire when the user presses the 'done' button. (iPhone/iTouch)

Was answered in this question, How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?

This just leaves the home button event...for which there seems to be no reliable event for (see bottom 2 posts) https://discussions.apple.com/thread/4182660?start=0&tstart=0

like image 113
Brenton Avatar answered Dec 15 '22 00:12

Brenton