有没有办法使用 HTML5 <video> 标签全屏播放视频？
如果这是不可能的，有人知道这个决定是否有理由吗？
【问题讨论】：
标签： html video html5-video fullscreen
HTML 5 无法让视频全屏显示，但并行的 Fullscreen API为元素定义了一个 API 以全屏显示自己。
这可以应用于任何元素，包括视频。
Browser support 很好，但是 Internet Explorer 和 Safari 需要前缀版本。
提供了一个external demo，因为 Stack Snippet 沙盒规则会破坏它。
<div id="one">
One
</div>
<div id="two">
Two
</div>
<button>one</button>
<button>two</button>
div {
width: 200px;
height: 200px;
}
#one { background: yellow; }
#two { background: pink; }
addEventListener("click", event => {
const btn = event.target;
if (btn.tagName.toLowerCase() !== "button") return;
const id = btn.textContent;
const div = document.getElementById(id);
if (div.requestFullscreen)
div.requestFullscreen();
else if (div.webkitRequestFullscreen)
div.webkitRequestFullscreen();
else if (div.msRequestFullScreen)
div.msRequestFullScreen();
});
HTML 5 无法让视频全屏显示，但并行的Fullscreen specification 提供了requestFullScreen 方法，允许将任意元素（包括<video> 元素）设置为全屏。
它有experimental support in a number of browsers。
注意：这已从规范中删除。
来自HTML5 spec（撰写本文时：2009 年 6 月）：
用户代理不应提供 用于显示视频的公共 API 全屏。一个脚本，结合一个 精心制作的视频文件，可以 诱使用户思考 已显示系统模式对话框， 并提示用户输入密码。 也有“单纯”的危险 烦恼，页面启动 链接时全屏视频 单击或浏览的页面。反而， 用户代理特定的界面功能 可以提供以轻松地允许 用户获得全屏播放 模式。
浏览器可以提供用户界面，但不应该提供可编程的。
【讨论】：
这里的大部分答案都已经过时了。
现在可以使用Fullscreen API 将任何元素带入全屏，尽管它仍然很混乱，因为您不能在所有浏览器中只调用div.requestFullScreen()，而是必须使用浏览器特定的前缀方法。
我创建了一个简单的包装器 screenfull.js，它可以更轻松地使用全屏 API。
目前的浏览器支持是：
请注意，许多移动浏览器似乎不支持full screen option yet。
【讨论】：
Safari通过webkitEnterFullscreen支持它。
Chrome 应该支持它，因为它也是 WebKit，但是会出错。
Firefox 的 Chris Blizzard 表示，他们将推出自己的全屏版本，允许任何元素进入全屏状态。例如帆布
Opera 的 Philip Jagenstedt 表示他们将在以后的版本中支持它。
是的，HTML5 视频规范说不支持全屏，但既然用户想要它，而且每个浏览器都会支持它，规范会改变。
【讨论】：
webkitEnterFullScreen();
这需要在视频标签元素上调用，例如全屏页面上的第一个视频标签使用：
document.getElementsByTagName('video')[0].webkitEnterFullscreen();
注意：这是过时的答案，不再相关。
【讨论】：
许多现代 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
【讨论】：
我认为，如果我们想要一种开放的方式在浏览器中观看视频，而不需要任何封闭源插件（以及 Flash 插件历史上的所有安全漏洞......）。标签必须找到激活全屏的方法。我们可以像 flash 一样处理它：要全屏，它必须通过鼠标左键单击来激活，我的意思是 ActionScript 无法启动以加载 flash 为例进行全屏显示。
我希望我已经足够清楚了：毕竟，我只是一名法国 IT 学生，而不是英国诗人 :)
再见！
【讨论】：
来自 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;
}
【讨论】：
现在，Firefox 和 Chrome（在它们的最新版本中）都可以使用一种可编程的全屏方式。好消息是这里已经起草了一个规范：
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
您现在仍然需要处理供应商前缀，但所有实现细节都在 MDN 站点中进行跟踪：
【讨论】：
您可以将宽度和高度更改为 100%，但不会覆盖浏览器 chrome 或 OS shell。
设计决定是因为 HTML 存在于浏览器窗口中。 Flash 插件不在窗口内，因此它们可以全屏显示。
这是有道理的，否则你可以制作覆盖外壳的 img 标签，或者制作 h1 标签，这样整个屏幕就是一个字母。
【讨论】：
不，在 html 5 中不可能有全屏视频。如果你想知道原因，你很幸运，因为现在正在进行全屏的争论。请参阅WHATWG mailing list 并查找“视频”一词。我个人希望他们在 HTML 5 中提供全屏 API。
【讨论】：
Firefox 3.6 为 HTML5 视频提供全屏选项，右键单击视频并选择“全屏”。
最新的 Webkit nightlies 也支持全屏 HTML5 视频，尝试使用最新的 nightly 的 Sublime player 并在选择全屏选项时按住 Cmd / Ctrl。
我猜 Chrome / Opera 也会支持这样的东西。希望 IE9 也能支持全屏 HTML5 视频。
【讨论】：
这在 WebKit 中通过 webkitEnterFullscreen 得到支持。
【讨论】：
另一种解决方案是浏览器只需在上下文菜单中提供此选项即可。不需要 Javascript 来执行此操作，尽管我可以看到它何时有用。
与此同时，另一种解决方案就是最大化窗口（Javascript 可以提供屏幕尺寸），然后最大化其中的视频。试一试，然后看看结果是否为您的用户所接受。
【讨论】：
完整的解决方案：
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();
}
}
}
【讨论】：
HTML 5 视频在最新的夜间版本的 Safari 中确实可以全屏显示，但我不确定它是如何在技术上实现的。
【讨论】：
是的。那么 HTML5 视频的情况是，您只需添加 <video> 标签，浏览器就会为其提供自己的 UI，从而实现全屏观看。它确实让我们用户的生活变得更好，不必看到一些开发人员使用 Flash 可以创造的“艺术”:) 它还增加了平台的一致性，这很好。
【讨论】：
从 Chrome 11.0.686.0 dev channel 开始，Chrome 现在有全屏视频。
【讨论】：
如果你告诉用户按 F11（许多浏览器全屏），你可以做到这一点，然后你把视频放在整个页面上。
【讨论】：
如果这些答案都不起作用（因为它们对我不起作用），您可以设置两个视频。一个用于常规尺寸，另一个用于全屏尺寸。当你想切换到全屏时
【讨论】：
如果您可以选择将您的网站定义为渐进式网络应用 (PWA)，那么您还可以选择在 manifest.json 下使用 display: "fullscreen"。但这只有在用户将您的 web 应用程序添加/安装到主屏幕并从那里打开时才有效。
【讨论】：
很简单，所有的问题都可以这样解决，
1) 转义总是让你退出全屏模式 （这不适用于通过f11手动进入全屏）
2) 暂时显示一个小横幅，说明已进入全屏视频模式（通过浏览器）
3) 默认阻止全屏操作，就像在 html5 和位置 api 等中对弹出窗口和本地数据库所做的那样。
我认为这种设计没有任何问题。有人认为我错过了什么吗？
【讨论】：