Потоковое видео Cloudfront на JWplayer, встроенное в colorbox

Я пытаюсь настроить JWplayer для отображения в цветовом поле и воспроизведения фильма, передаваемого из CloudFront. Он не работает должным образом, и я не уверен, проблема в JWplayer, Colorbox или во мне :-)

Использование JWplayer 5 с тегами <embed> и <object> работает нормально. Когда я встраиваю JWplayer 5 с jwplayer.setup, ширина и высота цветового поля транспонируются

При использовании 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


jwplayer colorbox
person Frank H.    schedule 04.03.2013    source источник
comment
Я действительно думаю, что между ColorBox и нашим JS-встраивателем может возникнуть конфликт, поскольку примеры «встраивания» работают нормально. Я лично не использовал ColorBox, но знаю, что FancyBox работает с нашим методом встраивания JS. Если вас интересует демонстрация, напишите мне по электронной почте: longtailvideo.com/contact-us   -  person emaxsaun    schedule 04.03.2013
comment
Спасибо за быстрый ответ. На странице контактов неясно, как отправить вам электронное письмо напрямую, но да, я был бы заинтересован в демонстрации FancyBox.   -  person Frank H.    schedule 04.03.2013
comment
Конечно - поддержите [в] longtailvideo [точка] com, спасибо!   -  person emaxsaun    schedule 04.03.2013

Ответы (1)


arrow_upward
0
arrow_downward

Прошу прощения, что потребовалось так много времени, чтобы обойти это, но я нашел ответ на свою проблему и хотел добавить его сюда на благо всех, кто столкнется с той же проблемой в будущем...

Я попытался использовать 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>
person Frank H.    schedule 05.05.2013