Question

我使用video.js进行视频播放。使用iframe 不时，单击全屏按钮可按预期工作。但是，使用iframe时，全屏按钮不起作用。为什么是这样？

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 Spec ＆＃34;只有通过HTML iframe元素的allowfullscreen属性明确允许的嵌入内容才能全屏显示。这可以防止不受信任的内容进入全屏状态。＆＃34;

虽然浏览器＆＃39;对全屏支持仍然是实验性的，您需要使用特定于Webkit和Mozilla的属性webkitallowfullscreen和mozallowfullscreen：

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

在不支持全屏API的浏览器（例如Internet Explorer 10 and lower）上，全屏只是不起作用。要在这些浏览器中近似全屏，video.js播放器将展开以填充浏览器窗口。但是，当玩家在iframe中时，它不会比iframe更大。

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

Answer 2

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

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之类的浏览器中。在某些浏览器上，无论发生什么，周长都将保持640x360。如果你有耐心为1个视频创建2个html页面，那么在所有浏览器上都可以解决这个问题。创建一个完全重复的html页面并将其命名为sco01-mlargeplayer.html。在大型播放器页面中设置具有更大宽度和高度周长的视频。现在在/ video标签之后的原始页面播放器代码下实现一个外部链接按钮，打开一个新页面，读取类似于＆＃34;增加播放器大小＆＃34;。使用target =＆＃34; _parent＆＃34;如果您不介意抓住嵌入式视频页面的人，则可以在同一窗口中打开新页面。如果您想要打开新页面，请阅读＆＃34; Google Chrome标签说明＆＃34;进一步向下。请记住添加＆＃34;减少播放器尺寸＆＃34;新创建的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>

如果您想在新页面中打开 - Google Chrome浏览器非常棘手。 http://code.google.com/p/chromium/issues/detail?id=106780 - ＆＃34; Google Chrome标签＆＃34;的问题不在新标签中播放重复的视频.- 要在第二页打开新标签页时在2个Google Chrome标签页中播放相同的视频：在第二页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播放器一起使用，只是为了踢和我的网站上的视频。你可以在这里嵌入一个演示，当我处理它时会更新。我叫它Woggie播放器。

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

使用video.js时，为什么全屏按钮在iframe中不起作用？

3 个答案: