BrightCove Smart Player API HTML Fallback failing

Question

I'm implementing a custom player for a project. I first thought it could be some of changes I made ( which were minor ) but all players seem to be failing when rendering the HTML version. Does anyone one have any experience with getting this up and running, this is my first time working with BrightCove. Here is my code. The player is in a modal that sites at the bottom of the page and the reference ID is grabbed dynamically to load up the video once the modal is opened.

HTML

<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
  <object id="myExperience" class="BrightcoveExperience">
    <param name="bgcolor" value="0x01000000" />
    <param name="width" value="602" />
    <param name="height" value="451" />
    <param name="playerID" value="2346987014001" />
    <param name="playerKey" value="AQ~~,AAAACNNhjOE~,7GG4lXihTUWE4HZdWRznisBnhfUh1o33" />
    <param name="isVid" value="true" />
    <param name="isUI" value="true" />
    <param name="dynamicStreaming" value="true" />
    <param name="includeAPI" value="true" />
    <param name="forceHTML" value="true" />
    <param name="templateLoadHandler" value="onTemplateLoad" />
  </object>
  <script type="text/javascript">brightcove.createExperiences();
</script>
<script language="JavaScript" type="text/javascript">
  var player, modVP, expMod;
  function onTemplateLoad(experienceID) {
    player = brightcove.api.getExperience(experienceID);
    modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
  }
</script>

JS

var waitForModVp = function () {
        if( typeof modVP == 'object' ) {
          modVP.loadVideoByReferenceID(newSrc);
          $(window).on('resize.size-video', function(){
            expMod = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
            var width = window.innerWidth*0.8,
            height = (window.innerWidth*0.8)*0.7491694352;
            if (width < 610) {
              expMod.setSize(width, height);
              $('.fullscreen-interior-video').css({
                'width' : width+'px',
                'height' : height+'px'
              });
            }
          })
        } else {
          window.setTimeout( waitForModVp, 250 );
        }
      }
      if ( thisData.templateReference == "brightcovePlayer") {
        waitForModVp();
      }

Any help will be greatly appreciated, Thanks.

Answer 1

This seems to be the issue:

<param name="bgcolor" value="0x01000000" />

Changed to:

<param name="bgcolor" value="#000000" />

The player is now working across all platforms.

Answer 2

I think you should also specify a templateReady handler and move the initialisation of the APIModules.VIDEO_PLAYER module to that. This is a really common mistake and using just a templateLoadHandler works most of the time especially on desktop so it catches a lot of people out on mobile.

See the following notes from http://support.brightcove.com/en/video-cloud/docs/getting-started-smart-player-api

Important: understand the difference between the template loaded and template ready events:

• templateLoad: all the data for player and API have been received by the browser, and you can now get references to the overall player (the BrightcoveExperience) — the player has not been fully set up, though, and if you try to invoke any methods on it at this point, you are setting up a racing condition

• templateReady: the player has now been fully instantiated and is ready to interact with via the API — you should only call methods of the API modules after the template ready event has fired

To avoid calling methods too early, you can skip the templateLoad event and just handle the templateReady event. The disadvantage of this is that the player ID is not passed to templateReady handler, so you will need to get it from the publishing code in order to get a reference to the player.