将 Cloudfront 视频流式传输到嵌入在 colorbox 中的 JWplayer答案

【问题标题】：Streaming Cloudfront video to JWplayer embedded in colorbox将 Cloudfront 视频流式传输到嵌入在 colorbox 中的 JWplayer
【发布时间】：2013-03-04 16:06:49
【问题描述】：

我正在尝试将 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>

我用来嵌入 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（未授权）

彩盒 v1.4.3

jQuery 1.9.1

【问题讨论】：

我确实认为 ColorBox 和我们的 JS 嵌入器之间可能存在冲突，因为示例工作正常。我没有亲自使用过 ColorBox，但我知道 FancyBox 可以与我们的 JS 嵌入方法一起使用。如果您对演示感兴趣，请给我发电子邮件 - longtailvideo.com/contact-us
感谢您的快速回复。从联系页面上看如何直接给你发电子邮件并不明显，但是我会对 FancyBox 的演示感兴趣。
当然 - 支持 [at] longtailvideo [dot] com，谢谢！

标签： colorbox jwplayer

【解决方案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>

【讨论】：