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

Question

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

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

我没有得到全屏按钮。

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

难道是因为标签在框架内？有解决办法吗？

Answer 1

"Could it be because the tag is inside an frame? Is there a way around this?"

是的，经过一些调查，这似乎是原因。将 <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:

"If I insert a video into a site using the following... [see posted code]"

您发布的代码工作正常。网页中的 <video> 标签应该有全屏控件。您描述的问题仅在使用 <iframe>.

时出现

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

HTML 5 Video tag not showing fullscreen button

html

video

html5-video