HTML 5 视频标签不显示全屏按钮答案

【问题标题】：HTML 5 Video tag not showing fullscreen buttonHTML 5 视频标签不显示全屏按钮
【发布时间】：2020-01-22 18:06:18
【问题描述】：

我正在尝试获取带有视频标签的视频，以在控件中包含全屏选项。如果我使用以下方法将视频插入网站：

<video controls>
    <source src="filename.mp4 " type="video/mp4">
</video>

我没有得到全屏按钮。

有趣的是，当您查看 w3schools 时，页面上的示例显示全屏，但当您单击 Try me 时却没有。

可能是因为标签在框架内吗？有没有办法解决这个问题？

【问题讨论】：

显示此类问题的演示页面的链接，并说明您的浏览器是什么。无法重新创建问题，即使 W3Schools “试试我”视频也有全屏按钮可用。仅在 Chrome 上测试。
有趣的是，它在 Chrome 和 IE 中都很好。不在框架中时也可以在 Firefox 中使用。在 Firefox 中尝试 W3 示例，看看它是否对您不利。
除非我错过了备忘录，否则<video> 中没有全屏属性。您所看到的是来自他们用作示例的网页。
@rob 当我按照链接查看 W3 页面时，它会显示全屏（左图）。当我点击 Try Me 时，全屏按钮消失了（右图）。我假设是因为它在一个框架中。在 Firefox 中查看时，我的网站上出现了同样的问题，这就是问题所在。
@RGriffiths 我在 Firefox 中尝试过，现在看看你的意思。从您发布的<video> 标记代码中看，您的视频正在通过一些<iframe> 观看。

标签： html video html5-video

【解决方案1】：

“可能是因为标签在框架内吗？有没有办法解决这个问题？”

是的，经过一番调查，这似乎是原因。将<video> 标记放在<iframe> 中会导致全屏按钮在Firefox 中消失。

关于 W3Schools...

第一页创建了一个实际的视频标签（参见源代码的第 1143 行）。
在第二个“自己尝试”页面上，他们实际上是在创建一个 iframe（请参阅第 541 行的“尝试一下”页面源代码）：var ifr = document.createElement("iframe");等

解决方案：
在 iframe 代码中，添加allowfullscreen、webkitallowfullscreen和mozallowfullscreen。

如果使用 <iframe> 加载另一个 HTML 页面（其中包含显示的 <video> 代码），请尝试：

<!DOCTYPE html>
<html>
<body>

<iframe width="800" height="600" src="video_page.html" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe>

</body>

PS：

“如果我使用以下命令将视频插入网站... [查看发布的代码]”

您发布的代码运行良好。网页中的<video> 标记应具有全屏控件。您描述的问题仅在使用<iframe>时出现。

【讨论】：