cai*_*y20 8 iframe fullscreen video.js
我使用video.js进行视频播放.当不使用iframe,点击全屏按钮按预期工作.但是,使用iframe时,全屏按钮不起作用.为什么是这样？
video.js的主页是http://videojs.com/
iframe页面的代码是:
<!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页面的代码是:
<!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页面无法使用.
mis*_*ben 21
根据W3规范 "只有通过allowfullscreenHTML iframe元素属性特别允许的嵌入内容才能全屏显示.这可以防止不受信任的内容进入全屏状态."
虽然浏览器对全屏的支持仍然是实验性的,但您需要使用Webkit和特定于Mozilla的属性,webkitallowfullscreen并且mozallowfullscreen:
<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
在不支持全屏API的浏览器(例如Internet Explorer 10及更低版本)上,全屏将无效.要在这些浏览器中近似全屏,video.js播放器将展开以填充浏览器窗口.但是,当玩家在iframe中时,它不会比iframe更大.
如果有多个嵌套的iframe,则所有父iframe也需要这些属性.
| 归档时间： |
|
| 查看次数： |
17980 次 |
| 最近记录： |