21

我正在使用我的 mediaelement.js 播放器的默认设置，我的初始化非常基本： $('video').mediaelementplayer();

我的问题是：当视频嵌入 iframe 时，是否可以全屏播放播放器？当我按全屏时，视频会最大化到 iframe，但不会最大化到整个屏幕。这是 html 的限制还是有办法绕过它？

一般结构如下所示：

<!DOCTYPE html>
<html>
  <head />
  <body>
    <iframe>
      <!DOCTYPE html>
      <html>
        <head />
        <body>
          *My Video Here <video> ...*
        <body>
      </html>
    </iframe>
  </body>
</html>

谢谢！

编辑：这似乎是特定于玩家的。默认的 html5<video>实现最大化到全屏就好了，即使在 iframe 内也是如此。

4

4 回答 4

52

在 video.js 上偶然发现了这个：

模态窗口内的video.js：全屏不起作用

答案是将这些属性添加到 iframe：（ <iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"> 虽然不支持 IE）

于 2013-03-08T14:44:52.253 回答
1

我使用这段代码来跟踪视频是否进入/退出全屏模式：

MediaElementPlayer.prototype.enterFullScreen_org = MediaElementPlayer.prototype.enterFullScreen;
MediaElementPlayer.prototype.enterFullScreen = function() {
    // Your code here
    this.enterFullScreen_org();
}
MediaElementPlayer.prototype.exitFullScreen_org = MediaElementPlayer.prototype.exitFullScreen;
MediaElementPlayer.prototype.exitFullScreen = function() {
    // Your code here
    this.exitFullScreen_org();
}

我假设你可以在父页面上调用一个函数来放大 iframe？

于 2013-04-12T21:58:34.647 回答
0

这是一个“hack”解决方案，它甚至可以让您的页面加载得更快。

1) 创建一个图像（通常是视频的屏幕截图）来代替 iFrame。

2) 将单击事件处理程序绑定到图像，以便它为您需要的尺寸创建 iFrame。（您可以将这些尺寸基于客户端的窗口大小）。

于 2013-03-07T16:53:05.247 回答
0

我的客户已经对有限的视频“全屏”宽度感到满意——我必须去掉上面和下面的黑条。（在我的例子中，iFrame 的尺寸是 945×1500）。

这个，我可以纯粹用一点 CSS 来解决。

.mejs-container-fullscreen {
    background-color: #fff !important;
}

.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
    height: 530px !important;
    top: 500px !important;
}

.mejs-container.mejs-container-fullscreen .mejs-controls {
    bottom: auto !important;
    top: 1000px !important; /* video top + video height - controls height (30px) */
}

诚然，这是一个相当有限的解决方案，它在很大程度上取决于视频大小（以及多个视频的大小一致性）以及背景颜色。但它也可能对你有用。

于 2015-08-27T12:54:16.213 回答