Some tips & examples for flowplayer programming (javascript api)

flowplayer is a easy and handy HTML5 video player with javascript api. It also provides flash version, however, this article only discuss some tips and examples of HTML5 version javascript api.

Using playlist, and create flowplayer canvas with javascript api

<div id="jsvideocontainer1" style="position:absolute; top:30px; left:300px;  z-index:10;">
   <div id="jsplaylist1" class="flowplayer" style="width:480px">
   </div>
</div>

<script>
var arr1 = [];
arr1[0]= YOUR_VIDEO_URL;
arr1[1]= YOUR_VIDEO_URL;
arr1[2]= YOUR_VIDEO_URL;
arr1[3]= YOUR_VIDEO_URL;

var ele1 = document.getElementById("jsvideocontainer1");
var player1;

$(function () { // ensure DOM is ready
   // this will install flowplayer into an element
	$("#jsplaylist1").flowplayer({
		rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
		ratio: 9/16,
		playlist: arr1
	});
 
	player1 = flowplayer($("#jsplaylist1"));
	
	player1.bind('progress', function(e, player1){
		// do somethings
	}).bind('error', function(e, player1, err){
		// do somethings
	});
});
</script>

Load video but not play

player1.load(YOUR_VIDEO_URL);
player1.stop();

The preceding code is not so "perfect", because the player1 will "start playing" the loaded video before the stop() api call. The best solution is handling the "ready" event.

player1.bind('progress', function(e, player1){
	// do somethings
}).bind('error', function(e, player1, err){
	// do somethings
}).bind('load', function(e, player2){
	console.info('loading...');  // start loading the video
	                             // before enter ready state (trigger ready event), video playing related 
	                             // api calls do not work as expected.
}).bind('ready', function(e, player2){
	player2.stop();  // when "ready", resume/pause/stop and other video playing related api calls are "enabled".
	                 // Thus, call stop() immediately can prevent the video play.
	console.info('ready...');
});

Some unsolved issues

1. How to move the flowplayer div layer? It seems can not use javascript to change the position of the div layer which contains the flowplayer.
2. Is it possible to mute the flowplayer, if the video is loaded but doesn't start?

If someone knows the solution, plz kindly let me know.