8

我使用 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 页面不能使用。

4

3 回答 3

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 也需要这些属性。

于 2013-01-04T08:36:32.807 回答
2

如果您使用的是iframe.

allowfullscreen="true"

webkitallowfullscreen="true"

mozallowfullscreen="true"

例如：

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

这将解决问题:)

于 2014-02-26T13:46:27.853 回答
0

http://standupcomedy.me/tutorials/increaseplayersize 使用 iframe，您可以将视频放置在 640x315 等浏览器中的固定边界内。在某些浏览器上，无论发生什么情况，周长都将保持 640x360。如果您有耐心为 1 个视频创建 2 个 html 页面，那么在所有浏览器上都有解决此问题的方法。创建一个完全相同的 html 页面并将其命名为 sco01-mlargeplayer.html。在大型播放器页面中，设置具有较大宽度和高度周长的 vid。现在在 /video 标签之后的原始页面播放器代码下实现一个外部链接按钮，该按钮打开一个新页面，读取类似“增加播放器大小”的内容。如果您不介意使用嵌入视频页面的人员，请使用 target="_parent" 属性在同一窗口中打开新页面。如果您想打开一个新页面，请阅读页面下方的“Google Chrome 标签说明”。

<!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 -“谷歌浏览器标签”的问题不在新标签中播放重复的视频。 - 让相同的视频在 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 播放器一起用于踢球并在我的网站上播放视频。您可以在此处嵌入一个演示，该演示将在我处理它时进行更新。我称之为 Woggie 播放器.

 <iframe width="610" height="420" src="http://standupcomedy.me/woggie/movie" frameborder="0" allowfullscreen="true"  mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
于 2013-01-04T22:13:29.450 回答