当使用的Video.js，为什么不一个iframe里面的全屏按钮的工作？(When using vi

我使用的视频播放的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页面无法使用。

Answer 1:

按照W3规格 “只能通过特别允许嵌入的内容allowfullscreen的HTML IFRAME元素的属性就可以去全屏。这可以防止不可信的内容从去全屏。”

虽然浏览器的全屏支持仍处于试验阶段，你需要使用WebKit和Mozilla的特定属性webkitallowfullscreen和mozallowfullscreen ：

<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">

在不支持全屏API（如浏览器的Internet Explorer 10，下），全屏只是将无法正常工作。为了接近这些浏览器全屏，该球员的Video.js扩展以填充浏览器窗口。然而，当玩家处于一个iframe，它不能比的iframe任何大。

如果有多个在嵌套的iframe，所有父I帧也需要这些属性。

Answer 2:

您需要WebKit和Mozilla的特定属性的属性，如果您使用iframe 。

allowfullscreen="true"

webkitallowfullscreen="true"

mozallowfullscreen="true"

例如：

< iframe src="url" frameborder="0" width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">

这将解决这一问题:)

Answer 3:

http://standupcomedy.me/tutorials/increaseplayersize有关iframe你把你的视频在周边固定在浏览器中像640x315。在某些浏览器不管发生什么事了周边将保持640×360。有办法解决所有的浏览器，如果你有耐心创造1个视频2个HTML页面。创建一个完全相同的副本html页面，并呼吁它sco01-mlargeplayer.html。在大的球员页面设置VID具有较大的宽度和高度周长。现在下/视频标签后您的原始网页播放器代码来实现，打开一个新的网页阅读像“增加播放器尺寸”的外部链接按钮。使用目标=“_父”属性，打开同一窗口中的新页面，如果你不介意的嵌入式视频页面的人。如果你想有一个新的页面打开阅读“谷歌浏览器选项卡笔记”进一步下跌的页面。记住要添加新创建的sco01-mlargeplayer.html页面上的同一性质“减少播放器的大小”链接回复到原来的视频页面，后退按钮效果很好。

<!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>
<a href="http://standupcomedy.me/woggie/demoplayer"target="_parent">Increase PlayerSize</a> 
</div>
</body>
</html>

如果你想在一个新的页与打开谷歌Chrome浏览器是棘手的。 http://code.google.com/p/chromium/issues/detail?id=106780 -The问题与“谷歌浏览器选项卡”不打新tabs.-重复的影片要获得相同的视频在2谷歌浏览器玩标签时第二页在新标签中打开：更改第二页sco01-mlargeplayer.html源视频的顺序。这样，Chrome识别此视频作为一个新的视频。

Embedded player video source:
<source src="A-2-4.mp4" type='video/mp4'>
<source src="oceans-clip.webm" type='video/webm'>

New page video source
<source src="oceans-clip.webm" type='video/webm'>
<source src="A-2-4.mp4" type='video/mp4'>

我正在一个玩家控制系统与所有HTML5播放器等只是踢，并让我的网站up.You可以在这里嵌入一个演示，将被更新为我了。我的工作视频称它为Woggie播放器。

 <iframe width="610" height="420" src="http://standupcomedy.me/woggie/movie" frameborder="0" allowfullscreen="true"  mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

文章来源: When using video.js, why doesn't the full-screen button work inside an iframe?