Is it possible to react to Brightcove events on Apple devices?

Question

I was trying to build a video / image slider for mobile devices and I'm using Brightcove to display my videos.

Though due to limitations in the Brightcove versions I'm struggling to get my slider to work after a video has been played since I remove my overlay and Brightcove inserts an Iframe which disables pretty much all of my touch events (which are handled via hammer.js).

Let me show you my code:

Slider Markup:

<div id="wrapper">
    <div class='slide'>
        //Brightcove Player get's inserted here. Images are displayed via background
    </div>
    <div class='slideprevious'>
    </div>
    <div class='slidefollowing'>
   </div>
</div>

Brightcove Initialisation:

var addVideo = function(){
    $('.slide').append('<div id="tsVideoPlayer"></div>');

    tsCreatePlayer('tsVideoPlayer', slides.eq(num).data('video-id'), 'XXXXXXXX');

    if(typeof bcPlayer === 'undefined'){
         $.when(
             //asynchronous loading of JS
             $.getScript( "http://admin.brightcove.com/js/BrightcoveExperiences_all.js" ),
             $.getScript( "/xxx/xxx/brightcove_video.js" ),
             $.Deferred(function( deferred ){
                 $( deferred.resolve );
             })
          ).done(function(){
             addVideo();
          });
     } else {
          addVideo();
     }

Event Handling:

function getPlayerId(data) {
    for (var prop in data)
        return prop;
}
var player = bcPlayer.getExperience(getPlayerId(bcPlayer.experienceObjects)).modules.videoPlayer;

player.addEventListener(BCMediaEvent.PLAY, onPlayEventFired);
player.addEventListener(BCMediaEvent.STOP, onStopEventFired);

function onPlayEventFired() {
    alert("play");
}

 function onStopEventFired() {
    alert("stop");
 }

brightcove_video.js: http://pastebin.com/fTL5Uhqc

This actually works flawlessly on my Desktop in every browser. But as soon as I test it on Apple devices it doesn't work since the Flash Object isn't loaded anymore, but instead an iFrame.

Answer 1

There are two Brightcove player API versions -- the legacy Flash-only player API and the Smart Player API. You're using the former which as you've guessed by now doesn't work with HTML players.

This doc on the Brightcove support site details refactoring your code from the old to the new player API.