7

jPlayer的全屏可以在IFRAME标签内工作吗？照原样，“全屏”受 iframe 大小的限制。

编辑：

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

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

wherevideotut.html包含一个完整的 HTML 页面，其中包含 jPlayer 并且如果独立加载则可以工作。并且object标签是使用类似的代码修改的document.getElementById('movieContainer').innerHTML = '...。

另请参阅：https ://groups.google.com/forum/#!topic/jplayer/IQxIIYhtAnE

（PS 如果你想帮助我为 jPlayer 设计多视频，请在这里：jPlayer 多视频演示代码？）

4

4 回答 4

5

把它放在 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);
    }
});

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

于 2013-03-10T15:01:29.190 回答
2

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

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

于 2012-05-25T21:34:10.487 回答
0

对我来说，下面的代码有效

$(".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。

于 2015-03-09T06:39:35.317 回答
-1

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

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

在Set Fullsize Option 链接之后显示选项，您感兴趣的 3 个默认值中的 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.

借助此页面上的jPlayer 开发测试器，查看设置该选项的实时示例很容易。

以下是试用说明：

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

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

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

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

screen.height;
screen.width;

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

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

如果 iframe 不在同一个域中，上述方法可能不起作用，但我认为这对您来说不是问题。

于 2012-05-27T11:29:05.313 回答