Brightcove video does not display via fancybox on iphone 4

Question

I got an issue that the fancybox doesn’t display the brightcove video on the iphone 4, while it works in Firefox, IE 7, IE8, IE9, Safari, and Chrome, and Android phones.

I have the js to populate the fancybox for the video as the following,

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

A function called formatVideoContent will take the html (brightcove video html code, below, need videoPlayer, playerID and Key) and pass it to the ‘content’ parameter.

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

I know that iOS does not support .flv or .mov, but the same brightcove video html code that I used in the fancybox works in regular html page on iphone, just didn’t work on iphone once plugging in the fancybox. Fancybox version is 1.3.4 and jQuery is 1.4.4.

Did anyone try to show brightcove video via the fancybox on iphone? Thanks for any hint.

Answer 1

....the same brightcove video html code that I used in the fancybox works in regular html page on iphone

You could create a separated html page with such code and open it in fancybox using the iframe type of content like this script :

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

Answer 2

That's plain embed code for Brightcove's Flash player. It won't work on iOS. You need to use their javascript code, as it's that javascript that determines whether to replace the object with a Flash or HTML player as appropriate. That looks like this:

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

You'll need to include the Brightcove javascript in the page:

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

And you'll need to call brightcove.createExperiences() after the player code is inserted.

This works:

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