HTML5視頻API-全屏無法在iPad上使用Chrome / Safari瀏覽器

Question

我已經使用Will Haering的指南創建了一個自定義HTML5視頻播放器： https ://wch.io/posts/html5-video-api

在iPad上使用Chrome或Safari時，我遇到的問題是視頻無法進入全屏模式。

全屏Javascript代碼如下：

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();
        }
    }
});

如果有人可以提出建議，因為我看過類似的文章，但還沒有解決這個問題的運氣。

Answer 1

蘋果最近（截至2019年初）將iPadOS與iOS分開，他們最早於去年秋天（2018年）提出了對iPad Safari上全屏api的支持。

您的腳本基本上是正確的，但是您可以在以下博客文章中找到完整的跨瀏覽器和iPadOS 12.x Safari及以上版本的解決方案：

在iPad Safari上全屏顯示。

披露：我已經寫了在上述鏈接上共享的博客。 請注意，iPadOS上的Chrome仍不支持全屏API。