有没有办法让 HTML5 视频全屏显示？

https://stackoverflow.com/questions/1055214

20-08-2019
|

题

有没有办法使用 HTML5 全屏播放视频 <video> 标签？

如果这是不可能的，有人知道这个决定是否有理由吗？

解决方案

HTML5提供了无法进行视频屏，但是平行的全规范供应 requestFullScreen 方法，它允许任意的要素(包括 <video> 元素)作出全屏。

它已实验支持在一定数量的浏览器.

原来的回答：

从 HTML5规范 (在撰写本文时:日'09):

用户代理不应该提供一个公共API造成的视频显示全屏幕上。一个脚本，结合精心制作的视频文件，可以欺骗用户进入一个思考系统模式对话已经显示，和提示用户密码。还有危险的"仅仅" 烦恼，与页面启动全屏视频链接时是点击或网页的导航。相反，用户代理特定的接口功能可以提供容易让用户获得全屏幕上播放模式。

浏览器可能提供用户接口，但是不应该提供一种可编程的一个。

请注意，上述警告已经从规范。

其他提示

大部分答案在这里已经过时。

它现在可能带来的任何元素变成全屏使用全屏API, 虽然它仍然相当混乱，因为你不能只是电话 div.requestFullScreen() 在所有的浏览器，但必须使用浏览器的具体作为前缀的方法。

我已经创建了一个简单的包装 screenfull.js 这使它更容易使用的全屏API。

目前浏览器的支持是：

铬15+
Firefox10+
Safari5.1+

注意到许多移动浏览器似乎并不支持全屏幕上的选择呢.

<强> Safari浏览器支持它通过webkitEnterFullscreen。

Chrome浏览器应该支持它，因为它的WebKit也有，但是出现了错误。

这是克里斯暴雪的火狐表示，他们正在走出自己的版本，全屏，这将使任何元素去全屏的。例如画布

菲利普Jagenstedt 歌剧说，他们会支持它在以后的版本。

是，HTML5视频规范中指出不支持全屏，但是由于用户需要的时候，每一个浏览器都会支持它，该规范将改变。

webkitEnterFullScreen();

这需要被称为视频标签元件上，例如，至全屏页面使用所述第一视频标记：

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

注意：这是过时的答案，不再适用

我认为，如果我们希望有一个开放的方式来查看我们的浏览器中的视频没有任何闭源的插件（和所有的安全漏洞自带的flash插件的历史...）。标签必须找到一个方法来激活全屏幕..像闪光确实我们可以办理：做全屏，它必须通过左键点击来激活你的鼠标，没有别的，我的意思是这是不可能通过ActionScript来启动全屏在通过例子的闪光的加载。

我希望我已经很清楚：毕竟，我只是一个法国IT的学生，而不是一个英国诗人：）

再见！

许多现代的Web浏览器已经实现了全屏API，可让您充分屏幕焦点某些HTML元素。这确实是非常适合在一个完全身临其境的环境中显示互动媒体，如视频。

要获得全屏按钮的工作，你需要设置另一个事件侦听器将调用requestFullScreen()功能按钮被按下时。为了确保这将在所有支持的浏览器，你也将需要进行检查，看是否requestFullScreen()可用并退回到供应商前缀版本（mozRequestFullScreen和webkitRequestFullscreen），如果它是不行的。

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

参考： - HTTPS：//developer.mozilla .ORG / EN-US /文档/网络/指南/ API / DOM / Using_full_screen_mode 参考： - http://blog.teamtreehouse.com/building-custom-控制换HTML5的视频

一个可编程的方式来做到全屏现在工作在Firefox和Chrome浏览器（在其最新版本）。好消息是，规范一直草案在这里：

http://dvcs.w3.org/hg/全屏/原始文件/塞尖/ Overview.html

您还有现在处理供应商的前缀，但所有的实现细节在MDN网站被跟踪：

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

从CSS

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

可以改变宽度和高度是100％，但它不会覆盖浏览器铬或OS壳。

设计决定是因为HTML生活在浏览器窗口中。 Flash插件是不是在窗口内，这样他们就可以进入全屏模式。

这是有道理的，否则你可能会作出这样的覆盖的外壳的img标签，或使H1标签，使整个画面是一封信。

不，这不可能在HTML 5视频全屏如果你想知道原因，你是幸运的，因为全屏参数战斗现在。请参见 WHATWG的邮件列表和查找词“视频”。我个人希望他们提供HTML 5全屏API。

Firefox 3.6中对HTML5视频的全屏选项，在视频点击右键并选择“全屏”。

在最新的Webkit也Nightlies版支持全屏HTML5视频，请尝试崇高球员每晚的最新按住命令/ Ctrl键的同时选择全屏选项。

我猜铬/歌剧也将支持这样的事情。希望IE9还将支持全屏HTML5视频。

WebKit 通过以下方式支持此功能 webkit输入全屏.

一种替代的解决方案是必须浏览器简单地提供上下文菜单此选项。没有必要了Javascript要做到这一点，但我可以看到它的时候将是有益的。

在平均时间的替代解决方案将仅仅是最大化窗口（的Javascript可以提供屏幕尺寸），然后在其内最大化视频。搏一搏，然后简单地看结果是否适用于您的用户。

HTML 5视频确实去全屏在Safari的最新每日构建，虽然我不知道它是如何在技术上实现的。

完整的解决方案：

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.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();
                    }
            }
    }

是。那么什么用HTML5视频的情况是，你只是把<video>标签，浏览器会给它自己的用户界面，从而为全屏幕观看的能力。这真的让生活变得更好的对我们的用户没有看到“艺术”一些开发商使用Flash播放可以使:)它也增加了一致性的平台，这是很好的。

它的简单，所有的问题可以解决这样的，

1）已经逃避总是带你出去的全屏模式（这并不适用于手动输入至f11全屏）

2）临时显示一个小横幅说全屏视频模式被输入（由浏览器）

3）阻断由默认全屏作用，就像已在HTML5和位置API和等，等弹出窗口和本地数据库来完成。

我没有看到这种设计的任何问题。有人认为我错过了什么？

自Chrome 11.0.686.0 dev的铬信道的现在有全屏视频。

如果你告诉用户按F11（全屏许多浏览器），你可以做到这一点，你把视频页面的整个身体。

如果以上答案都不对不工作（因为他们没有对我来说）你可以设置两个视频。一个常规尺寸，另一个用于全屏大小。当你想切换到全屏

使用JavaScript来设置全屏视频的“SRC”属性，以较小的影片“SRC”属性
设置在全屏视频video.currentTime是一样的小的视频。
使用样式表“显示：无”隐藏小的视频和显示大单及通“的位置是：绝对的”和“的z-index：1000”。什么真正的高

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow