将云前端视频流式传输到colorbox中嵌入的JWplayer

Question

我正在尝试将JWplayer设置为出现在颜色盒中，并播放从CloudFront流式播放的电影。它不能正常工作，我不确定问题出在JWplayer、Colorbox还是我身上:-)

使用带有<embed>和<object>标签的JWplayer 5，它工作得很好。当我用jwplayer.setup嵌入JWplayer 5时，颜色盒的宽度和高度被颠倒了

使用JWplayer 6时，从CloudFront流式传输时，颜色盒的尺寸会颠倒，但从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>

我在emebed 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.htm http://www.frankcommunication.ie/test/jwplayer6-colorbox-example.htm

我使用的确切版本是：

JWplayer 5.10.2295 (许可)

JWplayer 6.2.3115 (未授权)

Colorbox v1.4.3

jQuery 1.9.1

Answer 1

我很抱歉花了这么长时间才解决这个问题，但我找到了我的问题的答案，并想把它添加到这里，以便将来遇到同样问题的任何人都能受益。

我试着按照建议使用FancyBox，但它在尺寸上也有问题，所以我回到ColorBox并解决了这个问题。

解决方法很简单，只需将维度指定为ColorBox设置中的innerWidth和innerHeight参数，如下所示：

  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>