logo标签列表

有没有方法让HTML5视频全屏显示？

htmlvideohtml5-videofullscreen
160

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

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

@MiffTheFox 现代浏览器HTML5支持功能清单可以在这里找到：http://www.findmebyip.com/litmus/#html5-web-applications - ghoppe
##世界上第一个真正的HTML5全屏视频## http://blog.jilion.com/2011/07/27/world-s-first-true-html5-fullscreen-video 也可参见：https://wiki.mozilla.org/Gecko:FullScreenAPI - Wouter Dorgelo
21个回答
114

2020年的回答

HTML5没有提供一种使视频全屏的方式，但是并行的Fullscreen 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没有提供使视频全屏的方法，但是并行的Fullscreen规范提供了requestFullScreen方法，允许任意元素（包括<video>元素）全屏显示。

在一些浏览器中有实验性支持。

2009年回答

注意：这已被从规范中删除。

根据HTML5规范（截至2009年6月）：

用户代理不应提供公共API以使视频全屏显示。结合精心制作的视频文件，脚本可以欺骗用户认为系统模态对话框已经显示，并提示用户输入密码。还存在“纯粹”的恼人问题，当链接被点击或页面导航时，页面会启动全屏视频。相反，可以提供特定于用户代理的界面功能，以轻松地允许用户获取全屏播放模式。

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

76

这里的大部分回答已经过时。

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

我创建了一个简单的包装器screenfull.js，使使用全屏API更容易。

当前浏览器支持情况如下:

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

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

不起作用。Iframe1 有子 iframe2，当应用全屏时，它什么也不做。 - user285594
1
来自自述文件的@YumYumYum：“如果您的页面在<iframe>中，请添加allowfullscreen属性（+webkitallowfullscreen和mozallowfullscreen）。”。 - Sindre Sorhus
演示似乎无法在Android 4.3的默认浏览器中正常工作。 - Avatar
@SindreSorhus，现在支持移动浏览器了吗？ - Udara Suranga
32

Safari通过webkitEnterFullscreen来支持全屏模式。

Chrome应该也支持它，因为它也是基于WebKit的，但是会出现错误。

Firefox的Chris Blizzard表示，他们正在推出自己的全屏版本，可以让任何元素进入全屏模式，例如Canvas。

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

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

2
这个答案已经过时了，请查看Sindre Sorhus的答案（然后投票支持它，以便它超过这些过时的答案）。 - matt burns
18
webkitEnterFullScreen();

需要在视频标签元素上调用此方法，例如，要使页面上的第一个视频标签全屏使用：

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

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

这个答案已经过时了，请查看Sindre Sorhus的答案（然后投票支持它，以便它超过这些过时的答案）。 - matt burns
可以在Chrome或Chromium以及Node-Webkit中工作！ - Vish
10

许多现代网络浏览器已经实现了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

7

来自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;
}
2
这并不是真正的全屏。 - RamenChef
我们需要一个视频播放器的动态全屏。 - Ravi Mishra
6
我认为，如果我们想在浏览器中以开放的方式查看视频，而不需要任何闭源插件（以及随着Flash插件历史而来的所有安全漏洞...），则< video >标签必须找到一种激活全屏的方法。我们可以像Flash一样处理它：要全屏，必须通过鼠标左键单击进行激活，不能使用ActionScript例如在Flash加载时启动全屏。

我希望我的表述足够清晰：毕竟，我只是一名法国IT学生，不是英语诗人 :)

再见！

5
3

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

最新的Webkit夜间版本也支持全屏HTML5视频，请尝试使用 Sublime player和最新的夜间版本，在选择全屏选项时按住Cmd / Ctrl键。

我猜Chrome / Opera也会支持类似的功能。希望IE9也能支持全屏HTML5视频。

3
不，HTML5中无法实现全屏视频。如果你想知道原因，那么现在正好是关于全屏的争论战。请查看WHATWG邮件列表并搜索单词“video”。我个人希望他们在HTML5中提供全屏API。
非常感谢您提供那个邮件列表的链接，这是一个巨大的加分项。 - mwilcox
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接