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

Question

我有一个video元素与Safari（OS X 10.11 - El Capitan）中的标准控件完美配合。我有播放/暂停，擦洗器，字幕，甚至AirPlay。 ...但是没有全屏按钮。我发誓我之前在正常控件上看过那个按钮。 WebKit博客甚至有一个屏幕截图，其中包含unrelated article中的按钮（背景滤镜虽然是rad，但请查看）。

这严重不是标准功能吗？

我已将fullscreen添加到video和source代码，甚至fullscreen="fullscreen"以获得更好的衡量标准。 controls标记正在运行（我终于看到了控件）。

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

我一直在寻找，我能找到的最受欢迎的东西是this super old StackOverflow article，基本上说我需要使用Javascript。这看起来并不正确。 I feel like I’m taking crazy pills！

我想这可以解释为什么有这么多网站使用JS钩子推出自己的控件，但似乎对预期的功能有很多工作。

我意识到我只是要求在我可怜的名声中喋喋不休，但我希望我错过了一些明显的东西。

提前感谢您的帮助/ downvotes。 :)

Answer 1

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

我的“页面预览”恰好在弹出窗口中启动，并且最大化了这一点，在得出结论是弹出窗口与普通窗口/标签问题之前，我花了一些时间来消除各种因素。

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

此外：另请注意，在IFRAME中，行为方式也相同，同时也会删除全屏按钮（来自评论）。

Answer 2

我想出来了，至少有一半是愚蠢的。

标题

我将视频元素设置为使用max-width: 100%，因此它会填充页面上的容器。我认为这不会影响视频全屏显示的能力。

无元数据

视频首先没有预先加载的元数据。我用一个应用程序为文件添加标题。

Answer 3

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

根据Apple的documentation：

  

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

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

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

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