HTML5视频标签帧中无全屏_Html_Video_Fullscreen_Frameset

HTML5视频标签帧中无全屏

html video

HTML5视频标签帧中无全屏,html,video,fullscreen,frameset,Html,Video,Fullscreen,Frameset,我有一个包含视频标签的简单HTML页面。当显示在帧集中的帧外时，我会在视频上看到一个全屏按钮。当放置在框架集中的框架内时，全屏按钮变灰（Chrome）或消失（FireFox和IE 11）。有人对此有什么解释吗？还有更好的解决方案吗？非常感谢您的帮助 default.html： <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

我有一个包含视频标签的简单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>


您的浏览器不支持HTML5视频。

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

出于安全原因，不推荐使用

和

元素。相反，您更喜欢

和CSS。
但是，即使使用此选项，您也需要添加属性，以便视频可以从此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示例外包。

为这两种情况提供html。感谢Tanveer提供的示例html！非常感谢凯伊多！很好@伯格尼斯很高兴这有帮助。您可以将此答案标记为已接受，这样问题就不会出现在“需要答案”提要中。看见