jquery - HTML5 视频播放器全屏不工作

Question

我有一个页面，我在其中使用视频标签插入了一些 html5 视频

<video>whatever</video>

这些视频位于一个 div 中，当调整浏览器窗口大小时，我可以从不同位置移动。我使用 Jquery 函数appendTo移动 div 视频播放正常，移动没有任何问题。

问题是当我点击播放器的全屏按钮时，它不起作用。在移动它之前，视频会以全屏方式正确显示。

知道如何解决这个问题吗？

Answer 1

我今天制作了这段代码，用于为所有浏览器切换全屏：

 function toggleFullscreen() {
            if (document.fullScreen)
                    document.cancelFullScreen();
            if (document.webkitIsFullScreen) {
                    document.webkitCancelFullScreen();
            } else if (document.msIsFullScreen) {
                    document.msExitFullscreen();
            } else if (document.mozIsFullScreen) {
                    document.mozCancelFullScreen();
            }
            else {
                    if (document.cancelFullScreen)
                            videoHolder.requestFullscreen();
                    else if (document.webkitCancelFullScreen)
                            videoHolder.webkitRequestFullScreen();
                    else if (document.msExitFullscreen)
                            videoHolder.msRequestFullscreen();
                    else if (document.mozCancelFullScreen)
                            videoHolder.mozRequestFullScreen();
            }
    }

替换“videoHolder”。与您的视频元素。

您现在可以在 javascript 中运行 toggleFullscreen() 来切换全屏。希望这就是你要找的。