Playing multiple videos in two different views with Flowplayer

Question

Consider I have two separate players in two separate views in DOM. Each player gets video file asynchronous from my database by unique ID. So for first video player it works fine. But I am not sure about doing the same thing with my second player which is in second view.

<div class="View_1">
<div data-swf="<?php echo base_url();?>scripts/flowplayer.swf"
      class="flowplayer no-toggle play-button"
       data-ratio="0.625" data-embed="false">
      <video id="myPlayer_1">
         <source type="video/webm" src="http://stream.flowplayer.org/bauhaus/624x260.webm"/>
      </video>
   </div>
</div>

<div class="View_2">
<div data-swf="<?php echo base_url();?>scripts/flowplayer.swf"
      class="flowplayer no-toggle play-button"
       data-ratio="0.625" data-embed="false">
      <video id="myPlayer_2">
         <source type="video/webm" src="http://stream.flowplayer.org/bauhaus/624x260.webm"/>
      </video>
   </div>
</div>

In Javascript part I do so:

$(".filmStackPlay").live("click",function(){
        VideoUrl="http://content.unibox.tj/movies/"+$(this).attr("file");
         var api = flowplayer(0);
       api.load([
        { mp4: VideoUrl}]);
        $(".videoPlayerContainer").show();
        $(".videoPlayerContainer").animate({top:"0px"},300);
        $(".videoOverlay").show();       
});

I unload the player in first view by this method:

function UnloadVideo(){
        var api = flowplayer(0);
        api.unload();
        $(".videoPlayerContainer").hide();
        $(".videoPlayerContainer").css("top","-500px");
        $(".videoOverlay").hide();
}

The question is how to load video to the second view.

Answer 1

To load the first player you do the following

var api = flowplayer(0);
api.load();

To load the second player you quite simply increase the index by one.

var api = flowplayer(1);
api.load();