使用video.js时，为什么全屏按钮在iframe中不起作用？ [英] When using video.js, why doesn't the full-screen button work inside an iframe?
问题描述
我使用video.js进行视频播放。使用iframe 不时，单击全屏按钮可按预期工作。但是，使用iframe时，全屏按钮不起作用。为什么是这样？
I use video.js for video play. When not using an iframe, clicking the full screen button works as expected. However, when using an iframe, the full screen button doesn't work. Why is this?
video.js的主页是 http://videojs.com/
The homepage of video.js is http://videojs.com/
iframe页面的代码是：
the code of iframe page is:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<iframe src="sco01-m.htm" id="cw" name="cw" width="100%" height="1000px;" scrolling="no" frameborder="0"></iframe>
</body>
</html>
sco01-m.htm页面的代码是：
the code of sco01-m.htm page is:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<body>
<div align="center">
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="800" height="600" poster="1.jpg"
data-setup="{}">
<source src="A-2-4.mp4" type='video/mp4'>
<source src="oceans-clip.webm" type='video/webm'>
</video>
</div>
</body>
</html>
sco01-m.htm页面可以使用全屏按钮，但iframe页面无法使用。
The sco01-m.htm page can use the fullscreen button, But the iframe page can't use.
推荐答案
根据 W3 Spec 仅通过 allowfullscreen HTML iframe元素的属性将能够全屏显示。这可以防止不受信任的内容进入全屏。
According to the W3 Spec "only embedded content specifically allowed via the allowfullscreen attribute of the HTML iframe element will be able to go fullscreen. This prevents untrusted content from going fullscreen."
虽然浏览器支持全屏仍然是实验性的，你需要使用Webkit和Mozilla特有的属性 webkitallowfullscreen 和 mozallowfullscreen ：
While browsers' support for fullscreen is still experimental, you'll need to use Webkit and Mozilla-specific attributes webkitallowfullscreen and mozallowfullscreen:
<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
在不支持全屏API的浏览器上（例如 Internet Explorer 10及更低版本），全屏只是不会工作。要在这些浏览器中近似全屏，video.js播放器将展开以填充浏览器窗口。但是当玩家在iframe中时，它不会比iframe更大。
On browsers that do not support the fullscreen API (e.g. Internet Explorer 10 and lower), fullscreen just won't work. To approximate fullscreen in those browsers, the video.js player expands to fill the browser window. However when player is in an iframe, it can't get any bigger than the iframe.
如果有多个嵌套的iframe，所有父级iframe也需要这些属性。
If there are multiple nested iframes, all parent iframes also need these attributes.
这篇关于使用video.js时，为什么全屏按钮在iframe中不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
