Html 有没有办法让 HTML5 视频全屏显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1055214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to make HTML5 video fullscreen?
提问by nicudotro
Is there a way to play a video fullscreen using the HTML5 <video>tag?
有没有办法使用 HTML5<video>标签全屏播放视频？
And if this is not possible, does anybody know if there is a reason for this decision?
如果这是不可能的，有人知道这个决定是否有理由吗？
采纳答案by Quentin
HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen specificationsupplies the requestFullScreenmethod which allows arbitrary elements (including <video>elements) to be made fullscreen.
HTML 5 没有提供使视频全屏的方法，但并行的Fullscreen 规范提供了requestFullScreen允许将任意元素（包括<video>元素）全屏显示的方法。
It has experimental support in a number of browsers.
Original answer:
原答案：
From the HTML5 spec(at the time of writing: June '09):
来自HTML5 规范（撰写本文时：09 年 6 月）：
User agents should not provide a public API to cause videos to be shown full-screen. A script, combined with a carefully crafted video file, could trick the user into thinking a system-modal dialog had been shown, and prompt the user for a password. There is also the danger of "mere" annoyance, with pages launching full-screen videos when links are clicked or pages navigated. Instead, user-agent specific interface features may be provided to easily allow the user to obtain a full-screen playback mode.
用户代理不应提供公共 API 来导致视频全屏显示。脚本与精心制作的视频文件相结合，可以诱使用户认为系统模式对话框已经显示，并提示用户输入密码。也有“纯粹”烦恼的危险，当点击链接或浏览页面时，页面会启动全屏视频。相反，可以提供用户代理特定的界面特征以方便用户获得全屏播放模式。
Browsers may provide a user interface, but shouldn't provide a programmable one.
浏览器可以提供用户界面，但不应提供可编程的界面。
Note that the above warning has since been removed from the specification.
请注意，上述警告已从规范中删除。
回答by Sindre Sorhus
Most of the answers here are outdated.
这里的大多数答案已经过时。
It's now possible to bring any element into fullscreen using the Fullscreen API, although it's still quite a mess because you can't just call div.requestFullScreen()in all browsers, but have to use browser specific prefixed methods.
现在可以使用Fullscreen API将任何元素全屏显示，尽管它仍然很混乱，因为您不能只div.requestFullScreen()在所有浏览器中调用，而必须使用浏览器特定的前缀方法。
I've created a simple wrapper screenfull.jsthat makes it easier to use the Fullscreen API.
我创建了一个简单的包装器screenfull.js，可以更轻松地使用 Fullscreen API。
Current browser support is:
当前浏览器支持是：
- Chrome 15+
- Firefox 10+
- Safari 5.1+
- 铬 15+
- 火狐 10+
- Safari 5.1+
Note that many mobile browsers don't seem to support a full screen option yet.
请注意，许多移动浏览器似乎还不支持全屏选项。
回答by heff
Safarisupports it through webkitEnterFullscreen.
Safari通过webkitEnterFullscreen.
Chromeshould support it since it's WebKit also, but errors out.
Chrome应该支持它，因为它也是 WebKit，但会出错。
Chris Blizzard of Firefoxsaid they're coming out with their own version of fullscreen which will allow any element to go to fullscreen. e.g. Canvas
Firefox 的Chris Blizzard表示，他们将推出自己的全屏版本，这将允许任何元素全屏显示。例如帆布
Philip Jagenstedt of Operasays they'll support it in a later release.
Opera 的Philip Jagenstedt表示他们将在以后的版本中支持它。
Yes, the HTML5 video spec says not to support fullscreen, but since users want it, and every browser is going to support it, the spec will change.
是的，HTML5 视频规范说不支持全屏，但是由于用户需要它，并且每个浏览器都将支持它，因此规范会改变。
回答by jpkeisala
webkitEnterFullScreen();
This needs to be called on the video tag ele-ment, for example, to full-screen the first video tag on the page use:
这需要在视频标签元素上调用，例如要全屏显示页面上的第一个视频标签使用：
document.getElementsByTagName('video')[0].webkitEnterFullscreen();
Notice: this is outdated answer and no longer relevant.
注意：这是过时的答案，不再相关。
回答by Mo.
Many modern web browsers have implemented a FullScreen API that allows you to give full screen focus to certain HTML elements. This is really great for displaying interactive media like videos in a fully immersive environment.
许多现代 Web 浏览器都实现了 FullScreen API，允许您将全屏焦点放在某些 HTML 元素上。这对于在完全身临其境的环境中显示视频等交互式媒体非常有用。
To get the full screen button working you need to set up another event listener that will call the requestFullScreen()function when the button is clicked. To ensure that this will work across all supported browsers you are also going to need to check to see if the requestFullScreen()is available and fallback to the vendor prefixed versions (mozRequestFullScreenand webkitRequestFullscreen) if it is not.
要使全屏按钮工作，您需要设置另一个事件侦听器，该侦听器将在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();
}
Reference:- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_modeReference:- http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos
参考：- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode参考：- http://blog.teamtreehouse.com/building-custom-controls-for-html5 -视频
回答by Montaser
From CSS
来自 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;
}
回答by Montaser
I think that if we want to have a open way to view videos in our browsers without any closed source plugins (and all the security breaches that comes with the history of the flash plugin...). The tag has to find a way to activate full screen.. We could handle it like flash does: to do fullscreen, it has to be activated by a left click with your mouse and nothing else, I mean it's not possible by ActionScript to launch fullscreen at the loading of a flash by example.
我认为，如果我们想有一种开放的方式在我们的浏览器中查看视频，而无需任何闭源插件（以及 Flash 插件历史带来的所有安全漏洞......）。标签必须找到一种方法来激活全屏.. 我们可以像 flash 一样处理它：要全屏，它必须通过鼠标左键单击来激活，没有别的，我的意思是 ActionScript 不可能启动通过示例加载 Flash 时全屏显示。
I hope I've been clear enough: After all, I'm only a french IT student, not an english poet :)
我希望我已经足够清楚了：毕竟，我只是一名法国 IT 学生，而不是英国诗人 :)
See Ya!
拜拜！
回答by Ernest
A programmable way to do fullscreen is working now in both Firefox and Chrome (in their latest versions). The good news is that a spec has been draft here:
一种可编程的全屏方式现在可以在 Firefox 和 Chrome（最新版本）中使用。好消息是这里已经起草了一个规范：
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
You will still have to deal with vendor prefixes for now but all the implementation details are being tracked in the MDN site:
您现在仍然需要处理供应商前缀，但所有实现细节都在 MDN 站点中进行跟踪：
回答by Rich Bradshaw
You can change the width and height to be 100%, but it won't cover the browser chrome or the OS shell.
您可以将宽度和高度更改为 100%，但它不会覆盖浏览器镶边或操作系统外壳。
Design decision is because HTML lives inside the browser window. Flash plugins aren't inside the window, so they can go full screen.
设计决策是因为 HTML 存在于浏览器窗口中。Flash 插件不在窗口内，因此它们可以全屏显示。
This makes sense, otherwise you could make img tags that covered the shell, or make h1 tags so the whole screen was a letter.
这是有道理的，否则你可以制作覆盖外壳的 img 标签，或者制作 h1 标签，这样整个屏幕都是一个字母。
回答by calavera.info
No, it is not possible to have fullscreen video in html 5. If you want to know reasons, you're lucky because the argument battle for fullscreen is fought right now. See WHATWG mailing listand look for the word "video". I personally hope that they provide fullscreen API in HTML 5.
不，在 html 5 中不可能有全屏视频。如果你想知道原因，你很幸运，因为全屏的争论现在正在进行。请参阅WHATWG 邮件列表并查找“视频”一词。我个人希望他们在 HTML 5 中提供全屏 API。
