Fatal编程技术网
  • iframe/
  • 使用video.js时，为什么'；全屏按钮在iframe中不起作用吗？

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

iframe

使用video.js时，为什么'；全屏按钮在iframe中不起作用吗？,iframe,fullscreen,video.js,Iframe,Fullscreen,Video.js,我使用video.js进行视频播放。当不使用iframe时，单击全屏按钮将按预期工作。但是，当使用iframe时，全屏按钮不起作用。为什么会这样 video.js的主页是 iframe页面的代码为： <!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2

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

video.js的主页是

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

根据“只有通过HTML iframe元素的
allowfullscreen
属性特别允许的嵌入内容才能全屏显示。这可以防止不受信任的内容全屏显示。”

虽然浏览器对全屏的支持仍处于试验阶段，但您需要使用Webkit和Mozilla特有的属性
webkitallowfullscreen
和
mozallowfullscreen
：

<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
在不支持全屏API的浏览器上（例如），全屏就是不起作用。为了在这些浏览器中接近全屏，video.js播放器将展开以填充浏览器窗口。然而，当玩家在iframe中时，它不能比iframe大

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

使用Iframe，您可以将视频放在浏览器（如640x315）的固定范围内。在某些浏览器上，无论发生什么情况，周长都将保持在640x360。如果您有耐心为一个视频创建两个html页面，那么在所有浏览器上都有一种解决方法。创建一个完全重复的html页面，并将其命名为sco01-mlargeplayer.html。在“大播放器”页面中，设置具有较大宽度和高度周长的视频。现在，在/video标记后的原始页面播放器代码下，实现一个外部链接按钮，打开一个新页面，内容类似于“增加播放器大小”。使用target=“\u parent”属性在同一窗口上打开新页面，如果您不介意让人们观看嵌入的视频页面。如果你想打开一个新页面，请阅读页面下方的“谷歌浏览器标签说明”。记得在新创建的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选项卡中播放相同的视频，请更改第二页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>
如果您使用的是
iframe
，则需要查看Webkit和Mozilla特定的属性

allowfullscreen="true"

webkitallowfullscreen="true"

mozallowfullscreen="true"
例如：

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