Brightcove视频无法通过iphone 4上的fancybox显示

时间:2012-07-10 20:11:38

标签: iphone fancybox brightcove

我遇到了一个问题,即fancybox没有在iphone 4上显示brightcove视频,而它适用于Firefox,IE 7,IE8,IE9,Safari,Chrome和Android手机。

我有js填充视频的fancybox,如下所示,

$(".myfancybox").fancybox({
    'showCloseButton'   : true,
    'titlePosition'         : 'inside',
    'titleFormat'       : formatVideoTitle,
    'content'       : formatVideoContent,
    'scrolling'     : 'no',
    'autoScale'     : true
});

一个名为formatVideoContent的函数将采用html(下面的brightcove视频html代码,需要videoPlayer,playerID和Key)并将其传递给'content'参数。

<object id="flashObj" width="486" height="412" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,47,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="http://c.brightcove.com/services/viewer/federated_f9?isVid=1" name="movie">
<param value="#FFFFFF" name="bgcolor">
<param value="@videoPlayer=xxx&playerID=xxx&playerKey=xxx&domain=embed&dynamicStreaming=true" name="flashVars">
<param value="http://admin.brightcove.com" name="base">
<param value="false" name="seamlesstabbing">
<param value="true" name="allowFullScreen">
<param value="true" name="swLiveConnect">
<param value="always" name="allowScriptAccess">
</object>

我知道iOS不支持.flv或.mov,但我在fancybox中使用的相同的brightcove视频html代码在iphone上的常规html页面中工作,只是在插入fancybox后才在iphone上工作。 Fancybox版本是1.3.4,jQuery是1.4.4。

有没有人试图通过iphone上的fancybox显示brightcove视频?谢谢你的提示。

2 个答案:

答案 0 :(得分:0)

  

....我在fancybox中使用的同一个brightcove视频html代码在iphone上的常规html页面中工作

您可以使用此类代码创建一个单独的html页面并使用iframe类型的内容在fancybox中打开它:

$(".myfancybox").fancybox({
    'showCloseButton': true,
    'titlePosition' : 'inside',
    'titleFormat'   : formatVideoTitle,
 // 'content'       : formatVideoContent,
    'scrolling'     : 'no',
 // 'autoScale'     : true,
    'width'         : 486,
    'height'        : 412,
    'type'          : 'iframe'
});

答案 1 :(得分:0)

这是Brightcove的Flash播放器的简单嵌入代码。它不适用于iOS。你需要使用他们的javascript代码,因为它是javascript决定是否适当地用Flash或HTML播放器替换对象。看起来像这样:

<object id="bcPlayer" class="BrightcoveExperience">
  <param name="bgcolor" value="#FFFFFF" />
  <param name="width" value="480" />
  <param name="height" value="270" />
  <param name="playerID" value="xxxx" />
  <param name="playerKey" value="xxxx" />
  <param name="isVid" value="true" />
  <param name="isUI" value="true" />
  <param name="dynamicStreaming" value="true" />  
  <param name="@videoPlayer" value="xxxx" />
</object>

您需要在页面中加入Brightcove javascript:

<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

在插入播放器代码后,您需要致电brightcove.createExperiences()

这有效:

<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<script type="text/javascript">
formatVideoContent = '<object id="myExperience1353062063001" class="BrightcoveExperience">';
bcVideo += '  <param name="bgcolor" value="#FFFFFF" />';
bcVideo += '  <param name="width" value="400" />';
bcVideo += '  <param name="height" value="225" />';
bcVideo += '  <param name="playerID" value="1150189326001" />';
bcVideo += '  <param name="playerKey" value="AQ~~,AAAA0vRfoQE~,baHF9-H5aHJPAl3cZ-KjgHH9A7WtanGe" />';
bcVideo += '  <param name="isVid" value="true" />';
bcVideo += '  <param name="isUI" value="true" />';
bcVideo += '  <param name="dynamicStreaming" value="true" />';
bcVideo += '  <param name="@videoPlayer" value="1353062063001" />';
bcVideo += '</object>';
bcVideo += '<scr'+'ipt>brightcove.createExperiences();</scr'+'ipt>';
$(document).ready( function() {
  $(".myfancybox").fancybox({
    showCloseButton: true,
    content: bcVideo,
    scrolling: 'no',
    width: '400',
    height: '225'
  });
});
</script>