Question

我正在使用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中也是如此。

Answer 1

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

video.js inside a modal window: full screen not working

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

Answer 2

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

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吗？

Answer 3

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

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

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

Answer 4

我的客户已经满足于有限的视频'全屏'宽度 - 这只是我必须摆脱的上方和下方的黑条。（就我而言，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) */
}

不可否认，这是一个相当有限的解决方案，它高度依赖于视频大小（以及几个视频的大小一致性）以及背景色。但它也可能适合你。

将视频放在iframe中时如何制作全屏视频？

4 个答案: