Keep the Flowplayer in splash state when calling api.load

Question

I have a list with video thumbnails. In the thumbnail event I'm replacing the splash image and using the api.unload method to return to the splash state. This works fine, but when I'm trying to replace the video source by calling api.load, the video begins to play. How can I keep the Flowplayer in splash state when I'm using the api.load method? Here is my code:

$('.video-thumb').on('click', function () {
       var imageUrl = $(this).data('video-poster');

       //Replace the splash image
       $('.my-video-player').css('background-image', 'url(' + imageUrl + ')');

       //Return to splash state
       api.unload();

       //Replace the video sources
       api.load([
              { webm: $(this).data('video-webm') },
              { mp4: $(this).data('video-mp4') },
              { ogg: $(this).data('video-ogg') }
       ]);
 });

Colin Bacon Colin Bacon · Accepted Answer · 2014-01-14T16:31:37

If I understand correctly when you click on a thumbnail you want to unload the original video and display the new splash image. But you do not want it to play straight away.

Unfortunately api.load will play the video once ready. To get around this you will need to load the new video once the user clicks on the new splash image.

Keep the Flowplayer in splash state when calling api.load

1 Answers