HTML5 视频播放器全屏不工作答案

【问题标题】：HTML5 video player full screen not workingHTML5 视频播放器全屏不工作
【发布时间】：2013-09-12 19:35:28
【问题描述】：

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

<video>whatever</video>

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

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

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

【问题讨论】：

你能否展示一个更完整的示例（例如在 jsFiddle 中）

标签： jquery html video

【解决方案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() 来切换全屏。希望这就是您想要的。

【讨论】：

以及点击播放器全屏按钮时如何调用该函数？