0
votes

When watching videos on iOS fullscreen and clicking 'Done' in my video I go back to the page to a smaller state of the video but I want to trigger a function.

I've tried

myPlayer.on('ended', function() { }); 

myPlayer.addEventListener('ended', function(){ });

However, these detect if the video is ended and not when the user clicks 'Done' in the middle of the video.

Is there a method that can detect if the video leaves the fullscreen state?

1
While I never tested media events on iOS, I believe that done is a sort of pause. So you can check if that events triggers combined with the currentTime value.Ofir Baruch

1 Answers

0
votes

You could have a look at this using JQuery, It will detect if a video has come from fullscreen

// Entering fullscreen mode
$('video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullScreen' : 'NotFullScreen';

    // Now do something interesting
    if (event == 'NotFullScreen')
    {
        hideVideo();
    }
});

function hideVideo() 
{

  // You could also try this $('video').hide();
  $('video').toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<video width="950" height="534" controls="controls" preload="preload" poster="http://www.globalonenessproject.org/sites/default/files/player-still/laugh-clown-laugh-alt6_0.jpg">
  <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
  <source type="video/mp4" src="http://media.globalonenessproject.org/videos/mp4/laugh-clown-laugh-sd.mp4" />
  <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
  <source type="video/webm" src="http://media.globalonenessproject.org/videos/webm/laugh-clown-laugh-sd.webm" />
  <!-- Ogg/Vorbis for older Firefox and Opera versions -->
  <source type="video/ogg" src="http://media.globalonenessproject.org/videos/ogg/laugh-clown-laugh-sd.ogv" />
</video>