在IFRAME内部,jPlayer全屏?

IFRAME标签内可以使jPlayer的全屏工作吗? 因此,“全屏”受iframe大小的限制。

编辑:

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

 

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

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

(PS如果您想帮助我为jPlayer提供多video设计,请在此处执行此操作: jPlayer多video演示代码? )

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

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

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

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

对于我来说,代码工作

 $(".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); } }); 

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

  

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

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

他们的文档解释了如何在加载的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.单击页面顶部标题为"html, flash"蓝色链接
2.向下滚动到标题为setMedia(A:{m4v})的第一项,然后单击该项。
3.最后,通过向下滚动到标题为sizeFull灰色高亮设置并设置为360p来设置全屏大小。

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

对于您的iframe页面要求, 最大大小不是默认设置,因为这是iframe容器的100%。

相反,使用JavaScript指定客户端屏幕宽度和高度尺寸的大小 ,从而使其在iframe页面外全屏显示。 例:

 screen.height; screen.width; 

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

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

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