HTML5 <video> 没有标准全屏按钮？

Posted 2023-05-07

【中文标题】HTML5 <video> 没有标准全屏按钮？

【英文标题】：No Standard Full Screen Button for HTML5 <video>?

【发布时间】：2016-11-20 09:08:07

【问题描述】：

我有一个 video 元素，它与 Safari 中的标准控件（OS X 10.11 - El Capitan）完美配合。我有播放/暂停、洗涤器、字幕，甚至 AirPlay。 …但是没有全屏按钮。我发誓我以前在普通控件上看到过那个按钮。 WebKit 博客甚至在unrelated article 中有一个带有按钮的屏幕截图（背景过滤器是 rad 不过，检查一下）。

这真的不是标准功能吗？

我已将fullscreen 添加到video 和source 标签，甚至fullscreen="fullscreen" controls 标签正在工作（毕竟我看到了控件）。

ios 的控件在视觉上有所不同，包括全屏按钮。

我一直在四处寻找，我能找到的最受欢迎的是this super old *** article，它基本上说我需要使用 javascript。这似乎不对。 I feel like I’m taking crazy pills！

我想这可以解释为什么这么多网站使用 JS 钩子来滚动他们自己的控件，但对于预期的功能来说似乎需要做很多工作。

我意识到我只是在要求我可怜的名声，但我希望我只是错过了一些明显的事情。

提前感谢您的帮助/投反对票。 :)

【问题讨论】：

我注意到 this 其他帖子，但不一样。该视频不在iframe 中——没有嵌入或虚假的 dom 元素。我将视频托管在我的服务器上，并用一个简单的video 标签包含它。

【参考方案1】：

我对这个问题感到恐慌，直到我发现包含在“弹出窗口”而不是常规窗口/选项卡中的<video> 会导致<video> 标记在其控件中删除全屏按钮。

我的“页面预览”碰巧是在一个弹出窗口中启动的，并且将其最大化后，我花了一段时间消除各种因素，然后得出结论，这是一个弹出窗口与普通窗口/选项卡的问题。

我遇到的行为是在 Chrome 中。其他浏览器我没试过。

另外：另外，请注意，在 IFRAME 中也有相同的行为，也删除了全屏按钮（来自 cmets）。

【讨论】：

感谢您的提示！在 IFRAME 中运行时看起来是一样的。

将 Chrome 从 61 升级到 62 使全屏按钮出现在 iFrame 内的 <video> 上。我浏览了发行说明，但没有提及这一点。

【参考方案2】：

我想通了，这至少是愚蠢的。

标题

我将视频元素设置为使用max-width: 100%，这样它将填充页面上的容器。我认为这不会对视频全屏显示产生任何影响。

无元数据

视频一开始就没有任何要预加载的元数据。我使用应用程序为文件添加标题。

【参考方案3】：

开始播放视频时是否显示全屏切换按钮？

根据苹果的documentation：

在加载电影元数据之前，webkitSupportsFullscreen 属性无效。您可以通过为 loadedmetadata 事件安装事件侦听器来检测何时加载元数据。

在控件中启用全屏支持之前，视频文件中似乎有一些支持需要检查。

在 Chrome 和 Safari 上查看 html5 video 时，在视频开始播放之前不会出现全屏切换按钮。

编辑：您可以通过将 preload="metadata" 添加到您的 video 元素来解决此问题。

【讨论】：

谢谢，杰里米。 preload="metadata" 已开启。我在添加 VTT 字幕时打开了它。它似乎没有任何区别。只是吐口水，但这是否意味着我可能需要在整个页面加载后通过 JS 再次“预加载”它？不知道我会怎么做，或者这是否重要……

我将上面的内容移到了回复 Jeremy 而不是答案的评论中。杜普。

Jeremy 询问它是否在电影开始播放时出现。不，它永远不会出现。