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

有没有一种方法来播放视频全屏使用 HTML5<video>标签？

如果这是不可能的，有人知道这个决定是否有原因吗？

320449 次浏览
小开

你可以改变宽度和高度为100% ，但它不会覆盖浏览器铬或操作系统外壳。

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

这是有意义的，否则您可以创建覆盖 shell 的 img 标记，或者创建 h1标记，使整个屏幕成为一个字母。

小开
最佳答案

2020年的答案

HTML5没有提供制作全屏视频的方法，而是提供了并行 全屏 API为元素定义了一个 API 来全屏显示它们自己。

这可以应用于任何元素，包括视频。

浏览器支持 很好，但是 Internet Explorer 和 Safari 需要前缀版本。

提供了一个 外部演示作为 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();
});

2012年的答案

HTML 5没有提供制作全屏视频的方法，但是并行 全屏幕规格提供了 requestFullScreen方法，允许任意元素(包括 <video>元素)制作全屏视频。

它有 在许多浏览器中的实验性支持。

2009年的答案

注意: 这已经从规范中删除了。

来自 HTML5规范(撰写时间: 2009年6月) :

用户代理不应提供 公共 API 导致视频显示 全屏幕。一个脚本，结合一个 精心制作的视频文件，可以 诱使使用者认为 显示了系统模态对话框, 并提示用户输入密码。 还有“仅仅”的危险 烦恼，随着页面启动 当链接是全屏幕视频 点击或浏览页面, 特定于用户代理的界面特性 可以容易地提供 用户获得全屏幕播放 模式。

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

小开

我认为，如果我们想在浏览器中以开放的方式观看视频，而不使用任何封闭源代码插件(以及所有与 flash 插件历史相关的数字证书认证机构... ...)。标签必须找到激活全屏的方法。.我们可以像 flash 那样处理它: 要做全屏，只需要用鼠标左键点击就可以激活，我的意思是 ActionScript 不可能在加载一个 flash 时启动全屏。

我希望我已经说得够清楚了: 毕竟，我只是一个法国 IT 学生，而不是一个英国诗人:)

再见！

小开

另一种解决方案是浏览器只需在上下文菜单中提供此选项。不需要使用 Javascript 来做这件事，尽管我可以看到它什么时候会有用。

与此同时，另一种解决方案可能只是最大化窗口(Javascript 可以提供屏幕尺寸) ，然后最大化其中的视频。尝试一下，然后简单地看看结果是否为用户所接受。

小开

不，这是不可能有全屏幕视频在 html 5。如果你想知道原因，你很幸运，因为争夺全屏幕的争论正在进行。查看 WHATWG 邮件列表并查找单词“ video”。我个人希望他们在 HTML5中提供全屏 API。

小开

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

最新的 Webkit 夜间版也支持全屏 HTML5视频，尝试使用最新的 出色的选手夜间版，并在选择全屏选项时保持 Cmd/Ctrl。

我想 Chrome/Opera 也会支持类似的东西，希望 IE9也能支持全屏 HTML5视频。

小开

HTML5视频在最新的 Safari 夜间版本中是全屏的，尽管我不确定它在技术上是如何实现的。

小开

WebKit 通过 全屏支持这一点。

小开

是的。HTML5视频的情况是，你只要把 <video>标签放进去，浏览器就会提供自己的用户界面，从而提供全屏观看的能力。它确实让我们用户的生活变得更好，不必看到一些开发者玩 Flash 可以创造的“艺术”:)它还增加了平台的一致性，这很好。

小开

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

1)有逸出总是带你走出全屏模式 (这不适用于通过 f11手动输入全屏)

2)临时显示一个小横幅，说明进入全屏视频模式(由浏览器)

3)在默认情况下阻止全屏幕操作，就像在 html5中弹出窗口和本地数据库以及位置 api 等等中所做的那样。

我看不出这个设计有什么问题，有人觉得我漏掉了什么吗？

小开

Safari 通过 webkitEnterFullscreen支持它。

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

火狐的 Chris Blizzard 说他们将推出他们自己的全屏幕版本，这将允许任何元素进入全屏幕。例如帆布

歌剧的 Philip Jagenstedt 说他们将在后来的版本中支持它。

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

小开 
webkitEnterFullScreen();

这需要在 video 标记元素上调用，例如，为了全屏显示页面上的第一个 video 标记，可以使用:

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

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

小开

从 Chrome 11.0.686.0开始，Chrome 已经有了全屏视频。

小开

你可以这样做，如果你告诉用户按 F11(全屏为许多浏览器) ，你把视频的整个页面正文。

小开

一种可编程的全屏方式现在可以在 Firefox 和 Chrome (最新版本)中使用。好消息是，这里已经起草了一份规范:

Http://dvcs.w3.org/hg/fullscreen/raw-file/tip/overview.html

您现在仍然需要处理供应商前缀，但 MDN 站点正在跟踪所有的实现细节:

Https://developer.mozilla.org/en/dom/using_full-screen_mode

小开

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

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

我已经创建了一个简单的包装器 Screen full.js，它使得使用全屏 API 变得更加容易。

目前对浏览器的支持有:

  • Chrome15 +
  • Firefox 10 +
  • Safari 5.1 +

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

小开

如果没有这些答案不工作(因为他们没有为我) ，你可以设置两个视频。一个是普通尺寸，另一个是全屏尺寸。当你想切换到全屏时

  1. 使用 javascript 将全屏视频的“ src”属性设置为较小的视频“ src”属性
  2. 将全屏视频上的 video. currentTime 设置为与小视频相同。
  3. 使用 css‘ display: none’来隐藏小的视频，显示大的视频，通过位置: 绝对值和 z-index: 1000或其他非常高的值。
小开

来自 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;
}
小开

许多现代网页浏览器已经实现了一个 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();
}

参考文献:-< a href = “ https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/using _ full _ screen _ mode”rel = “ norefrer”> https://developer.mozilla.org/en-us/docs/web/guide/api/dom/using_full_screen_mode 参考文献:-< a href = “ http://blog.team/treehouse.com/building-custom- control-for-html5-video”rel = “ norefrer”> http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

小开

完整的解决方案:

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

如果你可以选择将你的网站定义为渐进式网络应用程序(PWA) ，那么你也可以选择在 宣言 Json下使用 display: "fullscreen"。但是这只有在用户将你的 webapp 添加/安装到主屏幕并从那里打开的情况下才能起作用。


提交答案