Question

jPlayer的全屏是否可以在IFRAME标记内工作？因此，“全屏”受到iframe大小的限制。

编辑：

以下是我在IFRAME中插入jPlayer的方法：

<div id="movieContainer" >
  <object id="videoTut" name="videoTut" type="text/html" data="/videotutorial/videotut.html">
  </object>
</div>

其中videotut.html包含一个包含jPlayer的完整HTML页面，如果单独加载则可以正常工作。 object标记使用document.getElementById('movieContainer').innerHTML = '...等代码进行修改。

另见：https://groups.google.com/forum/#!topic/jplayer/IQxIIYhtAnE

（P.S。如果您想帮助我为jPlayer提供多视频设计，请在此处执行此操作：jPlayer multi-video demo code?）

Answer 1

将其放入iframe

<iframe /* your iframe code */ webkitAllowFullScreen="true" mozallowfullscreen="true" allowFullScreen="true"></iframe>

并在js文件中添加

$("a.jp-full-screen").on('click', function() {
    var docm, rqst;

    docm = document.documentElement;
    rqst = docm.requestFullScreen || docm.webkitRequestFullScreen || docm.mozRequestFullScreen || docm.msRequestFullScreen;

    if(typeof rqst!="undefined" && rqst){
        rqst.call(docm);
    }
});
$("a.jp-restore-screen").on('click', function() {
    var docm, rqst;

    docm = document;
    rqst = docm.cancelFullScreen|| docm.webkitCancelFullScreen || docm.mozCancelFullScreen || docm.msCancelFullScreen || docm.exitFullscreen;
    if(typeof rqst!="undefined" && rqst){
        rqst.call(docm);
    }
});

我不确定这是否适用于闪存解决方案

Answer 2

嗯，iframe不能大于分配给它的尺寸。这是根本的。因此，除非iframe本身占据屏幕高度和宽度的100％，否则，我不相信你可以以“全屏”大小播放电影。同样，您无法播放大于分配给它的尺寸的对象。如果您可以控制整个屏幕，则可以动态调整iframe的高度和宽度以及其中包含的对象 - 当需要激活或停用媒体时。但要注意，因为这可能是一个滑坡。您可能会发现浏览器之间存在不一致的行为，可能需要花一些时间来解决特定于浏览器的布局问题。

所有这些......如果jPlayer使用Flash来播放电影而不是html5，你可以将“allowfullscreen”属性添加到iframe，这应该允许电影在iframe大小之外播放。但Flash是jPlayer的后备，因此您需要查看是否可以指定格式，否则您可能只想使用swfobject.js来加载Flash影片而不是使用jPlayer。同样，可能与浏览器不一致，因此您需要留出时间。

Answer 3

对我来说，代码工作

$(".jp-full-screen").on('click', function () {
        var docm, rqst;

        docm = document;
        rqst = docm.requestFullScreen || docm.webkitRequestFullScreen || docm.mozRequestFullScreen || docm.msRequestFullScreen;

        if (typeof rqst != "undefined" && rqst) {
            rqst.call(docm);
        }
    });

当我们点击按钮并再次禁用再次点击按钮时，全屏激活

<button class="jp-full-screen" role="button" tabindex="0">full screen</button>

确保在iframe上添加了webkitAllowFullScreen mozallowfullscreen allowFullScreen。

Answer 4

我查看了jplayer's API，看来您可以将 jplayer 的大小设置为全屏，即使在iframe页面内也是如此！

他们的文档解释了如何在 iframe页中使用Set Fullsize选项加载。

然后设置完整尺寸选项链接会显示选项，其中您感兴趣的3个default values中的2个会显示在此处：

width
    String : (Default: [Video:"100%"] [Audio:"0px"]) : The width as a CSS rule.
height
    String : (Default: [Video:"100%"] [Audio:"0px"]) : The height as a CSS rule.

要查看此page上的 jPlayer的开发测试程序，设置该选项很简单的实际示例。

以下是试用它的说明：

1。点击页面顶部的蓝色链接标题解决方案："html, flash"。
2. ：向下滚动到标题为setMedia(A:{m4v})的第一项，然后点击该内容。
3。最后，通过向下滚动到标题为sizeFull的灰色突出显示并设置为360p来设置全屏大小。

现在点击下面创建的jplayer上的播放！然后在播放期间，点击全屏按钮会将 jplayer 增加到 360p 定义的最大尺寸。

对于 iframe页面要求，最大尺寸不会是默认设置，因为这是iframe容器的100％。

相反，使用JavaScript指定客户端屏幕宽度和高度维度的大小，从而使其在iframe页面之外全屏显示。例如：

screen.height;
screen.width;

可以肯定的是，视频宽度和高度的值可以是百分比，如图所示，也可以是像素。然后将以下内容用引号括起来作为字符串，如上例所示。

[Video: "'" + screen.height + "px" + "'"]
[Video: "'" + screen.width + "px" + "'"]

如果iframe不在同一个域中，上述内容可能无效，但我认为这对您来说不是问题。

在IFRAME内部，jPlayer全屏？

4 个答案: