Auto-close video in fullscreen mode on iPad

Question

When a video is played in fullscreen mode I want to exit fullscreen when the video has ended. I have this working on desktop and android, but not on my iPad (v10.3.2)

The code to exit fullscreen looks like this

if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
  document.msExitFullscreen();
} else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
}

None of these function exists on my iPad when it tries to exit when the video has ended.

Here is the code which triggers fullscreen:

if (screen.requestFullscreen) {
  screen.requestFullscreen();
} else if (screen.mozRequestFullScreen) {
  screen.mozRequestFullScreen();
} else if (screen.msRequestFullscreen) {
  screen.msRequestFullscreen();
} else if (screen.webkitRequestFullscreen) {
  screen.webkitRequestFullscreen((<any>Element).ALLOW_KEYBOARD_INPUT);
} else {
  if (this.videoRef.nativeElement.webkitSupportsFullscreen) {
    this.videoRef.nativeElement.webkitEnterFullscreen();
  }
}

Any suggestion why this fails on my iPad?

Answer 1

Well you can do this with jQuery

$('video').get(0).webkitExitFullscreen();

and you can read more about the documentation of this method over here

https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1629468-webkitexitfullscreen

and how to use it at mozilla developer zone over here

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API