HTML5 视频标签在帧中没有全屏

Question

我有一个包含视频标签的简单 HTML 页面。当在框架集中的框架外显示时，我会在视频上看到一个可用的全屏按钮。当放置在框架集中悬停的框架内时，全屏按钮变灰（Chrome）或消失（FireFox 和 IE 11）。有没有人对此有解释 - 甚至对我来说更好的解决方案？非常感谢任何帮助！

default.html:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Video in frame</title>
</head>
<frameset rows="10%, 90%">
    <frame/>
    <frame src="video.html"/> 
</frameset>
</html>

video.html:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <video width="400" controls>
        <source src="test.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</body>
</html>

在浏览器中显示 default.html 时，没有（或灰色的）全屏按钮。在浏览器中显示 video.html 时，有一个可用的全屏按钮。

Answer 1

出于安全原因，<frame> 和 <frameset> 元素已弃用，不应使用。相反，更喜欢 <iframe> 和 CSS.
但即使使用它，您也需要添加 allowfullscreen 属性，以便视频可以从此 iframe 请求浏览器的全屏模式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Video in frame</title>
</head>
<body>
  <iframe allowfullscreen src="video.html"></iframe> 
</body>
</html>

由于stacksnippet的iframe本身没有这个属性，我们需要外包live example to jsfiddle.

HTML5 视频标签在帧中没有全屏

HTML5 Video tag no fullscreen in frames

html

video

fullscreen

frameset