7

I am basically trying to open a new tab in the Safari iPhone Mobile Browser (iOS 7) when the user clicks the "Done" button in the Native video player. This is the action flow:

  1. User Plays HTML5 Video (Clicks the Play Icon)
  2. Mobile Safari Opens Fullscreen Player 3 User Clicks Done

I tried various approaches and none of these events are working.

  1. ended
  2. webkitendfullscreen
  3. pause

Any ideas on on what may be a suitable solution? If you want to check out the work I have done so far here is the code and the JSFiddle Link: http://jsfiddle.net/r8bRE/

<script>
    var myVideo = document.getElementById("nVideo");   

    myVideo.addEventListener("pause", function() {
       window.open("http://www.google.com", "_blank");
       window.focus();
    }, false);    

    myVideo.addEventListener('webkitendfullscreen', function() {
       window.open("http://www.google.com", "_blank");
       window.focus();
    }, false);  
</script>
Adrian Bonnici
  • 283
  • 4
  • 14

1 Answers1

15

I banged my head on this for quite a few hours today. Initially, I was getting the 'webkitfullscreenchange' event to fire, but it was not being triggered on mobile. Eventually I found the event 'webkitendfullscreen', which is fired when the video is closed. Here is the code:

$('video').bind('webkitendfullscreen', function()
{ 
    console.log('on webkit close'); 
});

Hope this helps.

diemondtank
  • 456
  • 6
  • 6
  • diemondtank, you sir are a saint – gdibble Aug 10 '15 at 21:01
  • you mean, webkitendfullscreen is working by bind and not by event listener? – Amna Jun 22 '16 at 10:26
  • @Diana: the event listener seems to work on iPad but not on Mac, if I understand correctly: https://stackoverflow.com/questions/9094913/how-to-figure-out-when-a-html5-video-player-enters-the-full-screen-mode-on-ios – mvermand Jan 26 '18 at 08:58