HTML5视频API-全屏无法在iPad上使用Chrome / Safari浏览器

Question

I've created a custom HTML5 Video player using Will Haering's guide: https://wch.io/posts/html5-video-api

The issue I am having when using Chrome or Safari on an iPad is that the video will not enter fullscreen.

The fullscreen Javascript code is as follows:

fullScreenButton.click(function() {
    if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
        if(video.requestFullscreen) {
            video.requestFullscreen();
        } else if(video.msRequestFullscreen) {
            video.msRequestFullscreen();
        } else if(video.mozRequestFullScreen) {
            video.mozRequestFullScreen();
        } else if(video.webkitRequestFullscreen) {
            video.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if(document.exitFullscreen) {
            document.exitFullscreen();
        } else if(document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
});

If someone could please advise, as I have looked at the similar posts but yet have had no luck in fixing the issue.

Answer 1

Apple has separated iPadOS from iOS lately (as of early 2019) and they came up with support for fullscreen api on iPad Safari as early as fall last year (2018).

Your script is mostly correct, but you can find the full cross-browser and iPadOS 12.x Safari and above solution on the following blogpost:

Going fullscreen on iPad Safari.

Disclosure: I have written the blog shared on the aforementioned link. Note that Chrome on iPadOS still doesn't have support for fullscreen api.