Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS Safari detect when user clicks "Done" in native player

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>
like image 850
Adrian Bonnici Avatar asked Aug 28 '13 13:08

Adrian Bonnici


1 Answers

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.

like image 167
diemondtank Avatar answered Sep 19 '22 06:09

diemondtank