javascript - 如何为移动浏览器打开全屏视频

Question

我想出了如何在桌面设备上点击全屏视频，但是，相同的代码在移动设备上不起作用。我怎样才能让它也适用于移动屏幕？这是我的 js 代码：

<script>
    var myVideo = document.getElementById('videoplay');
    myVideo.addEventListener('click', function () {
    if (myVideo.requestFullscreen) {
        myVideo.requestFullscreen();
    }
    else if (myVideo.msRequestFullscreen) {
        myVideo.msRequestFullscreen();
    }
    else if (myVideo.mozRequestFullScreen) {
        myVideo.mozRequestFullScreen();
    }
    else if (myVideo.webkitRequestFullScreen) {
        myVideo.webkitRequestFullScreen();
    }
    myVideo.play();
}, false);
</script>

标签： javascripthtmlhtml5-videohtml5-fullscreen

Answer 1

并非所有移动设备都支持全屏 API。https://caniuse.com/#feat=fullscreen

您可以使用Screenfull来避免处理全屏体验的所有检查和复杂性。它公开了一个属性isEnabled，告诉您是否允许您进入全屏模式。您可以根据其值请求全屏。