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

Posted 2023-05-07

技术标签:

【中文标题】有没有办法让 HTML5 视频全屏显示？【英文标题】：Is there a way to make HTML5 video fullscreen? 【发布时间】：2010-11-06 12:19:59 【问题描述】：

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

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

【问题讨论】：

@MiffTheFox 可以在此处找到现代浏览器 HTML5 支持功能清单：findmebyip.com/litmus/#html5-web-applications ##世界上第一个真正的 HTML5 全屏视频## blog.jilion.com/2011/07/27/… 另见：wiki.mozilla.org/Gecko:FullScreenAPI 【参考方案1】：

2020年答案

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

2012 年回答

HTML 5 无法让视频全屏显示，但并行的Fullscreen specification 提供了requestFullScreen 方法，允许将任意元素（包括<video> 元素）设置为全屏。

它有experimental support in a number of browsers。

2009 年回答

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

来自HTML5 spec（撰写本文时：2009 年 6 月）：

用户代理不应提供用于显示视频的公共 API 全屏。一个脚本，结合一个精心制作的视频文件，可以诱使用户思考已显示系统模式对话框，并提示用户输入密码。也有“单纯”的危险烦恼，页面启动链接时全屏视频单击或浏览的页面。反而，用户代理特定的界面功能可以提供以轻松地允许用户获得全屏播放模式。

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

【讨论】：

【参考方案2】：

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

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

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

目前的浏览器支持是：

铬 15+ 火狐10+ Safari 5.1+

请注意，许多移动浏览器似乎不支持full screen option yet。

【讨论】：

它不工作。当应用全屏时，iframe1 具有来自 iframe2 的子 iframe2，它什么也不做。 @YumYumYum 来自自述文件：“如果您的页面位于该演示似乎不适用于 android 4.3 的默认浏览器。 @SindreSorhus 现在支持手机浏览了吗？【参考方案3】：

Safari通过webkitEnterFullscreen支持它。

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

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

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

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

【讨论】：

此答案已过时，请参阅 Sindre Sorhus 的答案（然后投票以使其取代这些过时的答案）【参考方案4】：

webkitEnterFullScreen();

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

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

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

【讨论】：

此答案已过时，请参阅 Sindre Sorhus 的答案（然后投票以使其取代这些过时的答案）在 Chrome 或 Chromium 以及 Node-Webkit 中工作！【参考方案5】：

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

【讨论】：

【参考方案6】：

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

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

再见！

【讨论】：

【参考方案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;

【讨论】：

这不是真正的全屏。我们需要一个动态全屏的视频播放器。【参考方案8】：

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

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

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

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

【讨论】：

【参考方案9】：

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

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

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

【讨论】：

【参考方案10】：

不，在 html 5 中不可能有全屏视频。如果你想知道原因，你很幸运，因为现在正在进行全屏的争论。请参阅WHATWG mailing list 并查找“视频”一词。我个人希望他们在 HTML 5 中提供全屏 API。

【讨论】：

大 +1 链接到该邮件列表。【参考方案11】：

Firefox 3.6 为 HTML5 视频提供全屏选项，右键单击视频并选择“全屏”。

最新的 Webkit nightlies 也支持全屏 HTML5 视频，尝试使用最新的 nightly 的 Sublime player 并在选择全屏选项时按住 Cmd / Ctrl。

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

【讨论】：

【参考方案12】：

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

【讨论】：

【参考方案13】：

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

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

【讨论】：

【参考方案14】：

完整的解决方案：

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

【讨论】：

【参考方案15】：

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

【讨论】：

为什么投反对票？ Safari 5 在其本机控件中具有全屏功能。（虽然没有 API！grrrr）【参考方案16】：

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

【讨论】：

【参考方案17】：

从 Chrome 11.0.686.0 dev channel 开始，Chrome 现在有全屏视频。

【讨论】：

【参考方案18】：

如果你告诉用户按 F11（许多浏览器全屏），你可以做到这一点，然后你把视频放在整个页面上。

【讨论】：

【参考方案19】：

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

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

【讨论】：

【参考方案20】：

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

【讨论】：

【参考方案21】：

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

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

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

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

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

【讨论】：

这不能回答问题。