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

Question

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

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

Answer 1

HTML 5无法使视频全屏显示,但并行的全屏规范提供了requestFullScreen允许任意元素(包括<video>元素)全屏显示的方法.

它在许多浏览器中都有实验支持.

原始答案:

从HTML5规范(撰写本文时:2009年6月):

用户代理不应提供公共API以使视频全屏显示.脚本与精心制作的视频文件相结合,可以诱使用户思考系统模式对话框,并提示用户输入密码.还有"单纯"烦恼的危险,当点击链接或浏览页面时,页面会启动全屏视频.相反,可以提供用户代理特定的界面特征以容易地允许用户获得全屏幕回放模式.

浏览器可以提供用户界面,但不应提供可编程的界面.

请注意,上述警告已从规范中删除.

Answer 2

这里的大部分答案都已过时.

现在可以使用Fullscreen API将任何元素全屏显示,尽管它仍然非常混乱,因为您不能只调用div.requestFullScreen()所有浏览器,但必须使用特定于浏览器的前缀方法.

我已经创建了一个简单的包装器screenfull.js,可以更轻松地使用Fullscreen API.

目前的浏览器支持是:

• Chrome 15+
• Firefox 10+
• Safari 5.1+

请注意,许多移动浏览器似乎还不支持全屏选项.

Answer 3

Safari支持它webkitEnterFullscreen.

Chrome应该支持它,因为它也是WebKit,但是出错了.

Firefox的 Chris Blizzard表示,他们将推出自己的全屏版本,这将允许任何元素进入全屏.例如画布

Opera的 Philip Jagenstedt 表示,他们将在稍后的版本中支持它.

是的,HTML5视频规范说不支持全屏,但由于用户需要它,并且每个浏览器都支持它,规范将会改变.

Answer 4

webkitEnterFullScreen();

这需要在视频标签元素上调用,例如,全屏显示页面上的第一个视频标签使用:

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

注意:这是过时的答案,不再相关.

Answer 5

我想如果我们想要一个开放的方式在我们的浏览器中查看视频而没有任何封闭的源代码插件(以及闪存插件历史记录中的所有安全漏洞......).标签必须找到一种激活全屏的方法..我们可以像闪存一样处理它:要做全屏,必须用鼠标左键单击激活而不是别的,我的意思是ActionScript无法启动它通过示例加载闪光灯全屏.

我希望我已经足够清楚:毕竟,我只是一名法国IT学生,而不是英国诗人:)

拜拜!

Answer 6

许多现代Web浏览器都实现了FullScreen 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

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