Question

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

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

Answer 1

HTML 5无法使视频全屏显示，但并行Fullscreen specification提供requestFullScreen方法，该方法允许任意元素（包括<video>元素）全屏显示。

它有experimental support in a number of browsers。

原始答案：

来自HTML5 spec（撰写本文时：2009年6月）：

用户代理不应提供用于显示视频的公共API 全屏。一个脚本，结合了一个精心制作的视频文件，可以欺骗用户思考已显示系统模式对话框，并提示用户输入密码。还有“纯粹”的危险烦恼，页面启动链接时的全屏视频点击或页面导航。代替，用户代理特定的接口功能可以提供以容易地允许用户获得全屏播放模式。

浏览器可能提供用户界面，但不应提供可编程的界面。

请注意，上述警告已从规范中删除。

Answer 2

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

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

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

目前的浏览器支持是：

Chrome 15 +
Firefox 10 +
Safari 5.1 +

请注意，许多移动浏览器似乎不支持full screen option yet。

Answer 3

Safari 通过webkitEnterFullscreen支持它。

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

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

Opera 的Philip Jagenstedt表示，他们会在稍后的版本中支持它。

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

Answer 4

webkitEnterFullScreen();

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

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

注意：这是过时的答案，不再相关。

Answer 5

许多现代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-videos

Answer 6

我认为，如果我们希望有一种开放的方式来浏览我们的浏览器中的视频而没有任何封闭的源插件（以及Flash插件历史记录中的所有安全漏洞......）。标签必须找到一种激活全屏的方法..我们可以像闪存一样处理它：要做全屏，必须用鼠标左键单击激活而不是别的，我的意思是ActionScript无法启动它通过示例加载闪光灯全屏。

我希望我已经足够清楚：毕竟，我只是一名法国IT学生，而不是一位英国诗人：）

见雅！

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

Answer 9

不，不可能在html 5中拥有全屏视频。如果你想知道原因，那么你很幸运，因为全屏的争论战正在进行中。请参阅WHATWG mailing list并查找“视频”一词。我个人希望他们提供HTML 5的全屏API。

Answer 10

Firefox 3.6具有HTML5视频的全屏选项，右键单击视频并选择“全屏”。

最新的Webkit nightlies也支持全屏HTML5视频，请使用最新的夜间Sublime player并在选择全屏选项时按住Cmd / Ctrl。

我猜Chrome / Opera也支持这样的功能。希望IE9还支持全屏HTML5视频。

Answer 11

WebKit通过webkitEnterFullscreen支持此功能。

Answer 12

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

设计决策是因为HTML存在于浏览器窗口内。 Flash插件不在窗口内，因此可以全屏显示。

这是有道理的，否则你可以制作覆盖shell的img标签，或制作h1标签，这样整个屏幕就是一个字母。

Answer 13

另一种解决方案是必须在浏览器上简单地在上下文菜单中提供此选项。不需要使用Javascript来执行此操作，但我可以看到它何时有用。

同时，替代解决方案只是最大化窗口（Javascript可以提供屏幕尺寸），然后最大化其中的视频。试一试，然后查看结果是否为您的用户所接受。

Answer 14

HTML 5视频确实在最新的每晚Safari版本中全屏显示，但我不确定它是如何在技术上完成的。

Answer 15

完整的解决方案：

http://googledrive.com/host/0B0uWu3qbasSeVjNCY1Nkekx5UkU

Answer 16

如果您可以选择将网站定义为渐进式Web应用程序（PWA），则还可以选择在manifest.json下使用display: "fullscreen"。但这仅在用户将您的Web应用添加/安装到主屏幕并从那里打开它时才有效。

Answer 17

如果这些答案都不起作用（因为它们不适合我），您可以设置两个视频。一个用于常规尺寸，另一个用于全屏尺寸。当您想切换到全屏

时

使用javascript将全屏视频的'src'属性设置为较小的视频'src'属性
将全屏视频上的video.currentTime设置为与小视频相同。
使用css'display：none'来隐藏小视频并显示带有'position：absolute'和'z-index：1000'的高视频或者非常高的视频。

Answer 18

如果您告诉用户按F11（许多浏览器的全屏），并且您将视频放在整个页面上，就可以执行此操作。

Answer 19

自Chrome 11.0.686.0起dev channel Chrome现在提供全屏视频。

Answer 20

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

1）逃脱总是让你退出全屏模式（这不适用于通过f11手动输入全屏）

2）暂时显示一个小横幅，表示已进入全屏视频模式（通过浏览器）

3）默认情况下阻止全屏动作，就像html5和位置api等中的弹出窗口和本地数据库一样。

我认为这个设计没有任何问题。谁觉得我错过了什么？

Answer 21

是。那么HTML5视频会发生什么，你只需要放置<video>标签，浏览器就会给它自己的用户界面，从而实现全屏观看的能力。它真的让我们的用户生活变得更好，不必看到一些开发人员使用Flash制作的“艺术”:)它还增加了平台的一致性，这很不错。

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

21 个答案: