浏览器如何判断 HTML5 个视频标签是否显示全屏按钮？

Question

所以我现在搜索了很长时间来寻找答案，但到目前为止还没有找到任何答案。这是我第一次真正研究 HTML5 视频问题，所以如果我的问题完全愚蠢，请原谅我。

我读了很多关于这个很棒的视频标签及其工作原理的文章。但是，我只找到 controls 参数是否启用整个控制栏的信息，然后似乎取决于浏览器，具体显示哪些控件。

为了更清楚地说明我在说什么，在 Chrome 中，全屏按钮如下所示：

我在这里找到了这个例子：http://www.w3schools.com/html/html5_video.asp

正如您（可能）看到的那样，当您打开此网站时，按钮就在那里。然而，一旦你点击它正下方的“Try it yourself”按钮，全屏按钮就不再显示了，也就是说，尽管代码看起来基本相同。

我知道这是浏览器处理它的固有方式。但是，至少在 Firefox 中的行为是完全相同的，所以我想知道：这背后的逻辑是什么？有什么方法可以让浏览器 "trick" 允许全屏按钮吗？

我（我认为）已经排除了问题根源的一些点：

• 视频的实际尺寸大于播放器
• 一些 CSS 技巧，例如将宽度设置为特定值并将最大宽度设置为 100%

有什么想法吗？

Answer 1

那是因为您的第二个示例中的视频位于 iframe 中，这对您如何操作其中的内容有很大限制。

我想象将 allowfullscreen 属性添加到 iframe 会显示不同的结果 r.e。视频控件。