有没有办法让HTML5视频全屏？有没有办法让HTML5视频全屏？(Is there a way to

有没有发挥使用HTML5视频全屏方式<video>标签？

如果这是不可能的，没有任何人知道，如果有此决定的理由？

Answer 1:

HTML 5提供没有办法使一个视频全屏，但并行全屏说明书供给requestFullScreen方法，其允许任意的元素（包括<video>元素），以进行全屏。

它在多个浏览器的实验支持 。

---

原来的答案：

从HTML5规范 （在写作的时间：09月）：

用户代理不应该提供一个公共的API，使影片中显示全屏。 一个脚本，用一个精心制作的视频文件合并，可能会欺骗用户以为系统模式对话框已被证明，并提示用户输入密码。 还有一个“纯粹”的烦恼的危险，推出全屏的视频被点击或页面导航的链接时，页面。 相反，可以提供用户代理特定的接口功能，以容易地允许用户获得一个全屏播放模式。

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

---

需要注意的是上面的警告已经被从规范中删除。

Answer 2:

这里的大多数答案都是过时的。

现在，您可以把任何元素到使用全屏全屏API ，但它仍然是相当混乱，因为你不能只调用div.requestFullScreen()在所有浏览器，但必须使用浏览器特定前缀的方法。

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

当前浏览器的支持：

• Chrome浏览器15+
• 火狐10+
• Safari浏览器5.1+

请注意，许多移动浏览器似乎不支持全屏选项还没有 。

Answer 3:

Safari支持它通过webkitEnterFullscreen 。

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

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

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

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

Answer 4:

webkitEnterFullScreen();

这需要被称为视频标签元素，例如，以全屏页面使用第一视频标签：

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

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

Answer 5:

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

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

拜拜！

Answer 6:

许多现代的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/docs/Web/Guide/API/DOM/Using_full_screen_mode参考： - http://blog.teamtreehouse.com/building-custom-controls-for-html5 -视频

Answer 7:

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

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

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

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

Answer 8:

您可以更改宽度和高度为100％，但它不会覆盖chrome浏览器或操作系统的壳。

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

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

Answer 9:

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

Answer 10:

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

最新的Webkit也Nightlies版支持全屏HTML5视频，请尝试崇高播放器与最新的夜间按住命令/ Ctrl键的同时选择全屏选项。

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

Answer 11:

这是在WebKit的通过支持webkitEnterFullscreen 。

Answer 12:

从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;
}

Answer 13:

另一种解决办法是有浏览器只需提供上下文菜单上此选项。 没有必要了Javascript要做到这一点，但我可以看到它的时候将是有益的。

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

Answer 14:

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

Answer 15:

完整的解决方案：

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

Answer 16:

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

Answer 17:

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

1）已逃离总是带你离开全屏模式（这并不适用于手动输入通过F11全屏）

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

3）阻止默认全屏动作，就像已经为弹出式广告和HTML5和位置API本地数据库等，等完成

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

Answer 18:

自Chrome 11.0.686.0的开发版 Chrome浏览器目前拥有全屏视频。

Answer 19:

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

Answer 20:

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

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

文章来源: Is there a way to make HTML5 video fullscreen?