我正在尝试设置JWplayer出现在一个色盒中,并播放来自CloudFront的流媒体电影。它不能正常工作,我不确定问题是与JWplayer, Colorbox,还是我:-)
使用JWplayer 5与<embed>
和<object>
标签,它工作得很好。当我嵌入JWplayer 5与jwplayer.setup
,颜色盒的宽度和高度调换
使用jwplayer6,当从流传输时,颜色盒的尺寸被调换从CloudFront下载时是正确的。
在Firefox和IE中播放电影时也有一些其他问题,但我没有我现在很担心他们。
我用来设置JWplayer 5和Colorbox的代码如下:<link rel="stylesheet" href="colorbox/example1/colorbox.css">
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script src="/test/colorbox/jquery.colorbox-min.js"></script>
<script src="/test/jwplayer5/jwplayer.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('a.cbox').colorbox({ inline:true, opacity:0.8 });
});
</script>
这是我用来嵌入JWplayer 5的代码:
<a href="#example-1" class="cbox" title="Example 1">Play movie</a>
<div style="display: none;">
<div id="example-1"></div>
<script type="text/javascript">
jwplayer("example-1").setup({
flashplayer: "/test/jwplayer5/player.swf",
file: "dogs_600.mp4",
streamer: "rtmp://s14flalja9b5hr.cloudfront.net/cfx/st",
width: 480,
height: 270,
autostart: true
});
</script>
</div>
我用来设置JWplayer 6和Colorbox的代码如下:
<link rel="stylesheet" href="colorbox/example1/colorbox.css">
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script src="/test/colorbox/jquery.colorbox-min.js"></script>
<script src="/test/jwplayer6/jwplayer.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('a.cbox').colorbox({ inline:true, opacity:0.8 });
});
</script>
我用来嵌入JWplayer 6的代码如下:
<a href="#example-1" class="cbox" title="Example 1: Streaming from CloudFront">Streaming from CloudFront</a><div style="display: none;">
<div id="example-1"></div>
<script type="text/javascript">
jwplayer("example-1").setup({
file: "rtmp://s14flalja9b5hr.cloudfront.net/cfx/st/mp4:dogs_600.mp4",
autostart: true,
width: 480,
height: 270
});
</script>
</div>
我已经设置了几个页面来演示这些问题:
http://www.frankcommunication.ie/test/jwplayer5-colorbox-example.htmhttp://www.frankcommunication.ie/test/jwplayer6-colorbox-example.htm
我使用的确切版本是:
JWplayer 5.10.2295(已授权)
JWplayer 6.2.3115 (unlicensed)
Colorbox v1.4.3
jQuery 1.9.1我很抱歉花了这么长时间才找到这个问题的答案,但是我想把它添加到这里,以便将来遇到同样问题的人受益。
我试着按照建议使用FancyBox,但它也有尺寸问题,所以我回到ColorBox并找出了它。
修复很简单,所有需要的是指定尺寸作为innerWidth和innerHeight参数在你的ColorBox设置,像这样:
jQuery(document).ready(function () {
jQuery('a.cbox').colorbox({
inline:true,
opacity:0.8,
innerWidth: 480,
innerHeight: 270
});
});
JWplayer嵌入代码与之前相同:
<a href="#example-1" class="cbox" title="Example 1">Play movie</a>
<div style="display: none;">
<div id="example-1"></div>
<script type="text/javascript">
jwplayer("example-1").setup({
flashplayer: "/test/jwplayer5/player.swf",
file: "dogs_600.mp4",
streamer: "rtmp://s14flalja9b5hr.cloudfront.net/cfx/st",
width: 480,
height: 270,
autostart: true
});
</script>
</div>