html - 有没有办法让 HTML5 视频全屏显示？

Question

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

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

score 105 · Accepted Answer

2020年答案

HTML 5 没有提供使视频全屏显示的方法，但并行的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 没有提供使视频全屏的方法，但并行的全屏规范提供了requestFullScreen允许将任意元素（包括<video>元素）制作为全屏的方法。

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

2009年答案

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

来自HTML5 规范（撰写本文时：09 年 6 月）：

用户代理不应提供公共 API 来使视频全屏显示。脚本与精心制作的视频文件相结合，可以诱使用户认为已显示系统模式对话框，并提示用户输入密码。还有“单纯”烦恼的危险，当点击链接或导航页面时，页面会启动全屏视频。取而代之的是，可以提供用户代理特定的界面特征，以方便用户获得全屏播放模式。

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

score 74 · Accepted Answer

这里的大多数答案都已过时。

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

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

当前的浏览器支持是：

铬 15+
火狐 10+
Safari 5.1+

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

score 31 · Accepted Answer

Safari通过webkitEnterFullscreen.

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

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

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

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

score 18 · Accepted Answer

webkitEnterFullScreen();

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

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

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

score 10 · Accepted Answer

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

score 6 · Accepted Answer

我认为，如果我们想以一种开放的方式在浏览器中观看视频，而无需任何封闭源插件（以及 Flash 插件历史带来的所有安全漏洞......）。标签必须找到激活全屏的方法。我们可以像 flash 一样处理它：要全屏，它必须通过鼠标左键单击来激活，我的意思是 ActionScript 无法启动例如，在加载 Flash 时全屏显示。

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

拜拜！

score 6 · Accepted Answer

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

score 5 · Accepted Answer

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

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

您现在仍然需要处理供应商前缀，但所有实现细节都在 MDN 站点中进行跟踪：

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

score 3 · Accepted Answer

您可以将宽度和高度更改为 100%，但它不会覆盖浏览器 chrome 或 OS shell。

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

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

score 3 · Accepted Answer

不，在 html 5 中不可能有全屏视频。如果你想知道原因，你很幸运，因为全屏的争论现在已经打响了。查看WHATWG 邮件列表并查找“视频”一词。我个人希望他们在 HTML 5 中提供全屏 API。

score 3 · Accepted Answer

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

最新的 Webkit nightlies 还支持全屏 HTML5 视频，尝试使用最新的 nightly 的Sublime 播放器并按住 Cmd / Ctrl 选择全屏选项。

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

score 3 · Accepted Answer

3

这在 WebKit 中通过webkitEnterFullscreen得到支持。

于 2010-07-01T16:13:08.677 回答

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

完整的解决方案：

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

score 1 · Accepted Answer

HTML 5 视频在最新的夜间版本的 Safari 中确实可以全屏显示，但我不确定它在技术上是如何实现的。

score -1 · Accepted Answer

是的。好吧，HTML5 视频的情况是，您只需放置<video>标签，浏览器就会为其提供自己的 UI，从而实现全屏观看。它真的让我们用户的生活变得更好，不必看到一些开发人员使用 Flash 可以创造的“艺术”:) 它还增加了平台的一致性，这很好。

score -1 · Accepted Answer

-1

从 Chrome 11.0.686.0开发频道开始， Chrome 现在有全屏视频。

于 2011-03-01T22:32:06.110 回答

score -1 · Accepted Answer

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

score -1 · Accepted Answer

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

使用 javascript 将全屏视频的“src”属性设置为较小的视频“src”属性
将全屏视频的 video.currentTime 设置为与小视频相同。
使用 css 'display:none' 隐藏小视频并使用 via 'position:absolute' 和 'z-index:1000' 或其他非常高的东西显示大视频。

score -1 · Accepted Answer

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

score -2 · Accepted Answer

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

1) 转义总是带你退出全屏模式（这不适用于通过 f11 手动进入全屏）

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

3）默认阻止全屏动作，就像对html5中的弹出窗口和本地数据库以及位置api等所做的那样。

我认为这种设计没有任何问题。有人认为我错过了什么吗？

html - 有没有办法让 HTML5 视频全屏显示？

21 回答 21

2020年答案

2012年答案

2009年答案

Related

Reference