Brightcove视频不会在iphone4上通过fancybox显示

Question

我遇到了一个问题，即fancybox在iphone4上不显示明亮的视频，而它在Firefox、IE7、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视频吗？谢谢你的提示。

Answer 1

。。。。我在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'
});

Answer 2

这是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>