Flowplayer> Scripting
Flowplayer API
Many times you need to control your flowplayer with JavaScript. For example you may want to make custom play / pause and stop buttons with HTML. This page introduces you how to do that.
Scripting setup
When you use flashembed.js the scripting setup is very easy. Since version 0.27 you have the ability to get handle to the Flash API in following way.
// with flashembed.js (ver. 0.27+) API is returned automatically
var api = flashembed("player", {src:'FlowPlayerDark.swf'}, {config: ...}});
Now that you have this API in place you can use it. As an example here is a HTML button that starts playback.
<button onClick="api.DoPlay()">Play</button>
If you try to make API call immediately after flashembed() call this will NOT work because Flowplayer is not ready yet. In case you want to perform scripting upon loading phase you have to put it into onFlowPlayerReady() callback method.
API Methods
There is no real standard for media players. A very common player in Linux world is mplayer and it has a browser plug-in. FlowPlayer API supports a subset of the JavaScript API available in mplayer API. This is because we wanted to use same method names that are used in a popular player.
Following methods are also supported by mplayer plugin.
| DoPlay():Void | Plays the current clip. |
| DoStop():Void | Stops playback and returns to the first clip in the playlist. |
| Reset():Void | Resets the player to the initial state. |
| Pause():Void | Pauses playback. |
| Seek(seconds:Number):Void | Seeks to the specified time during the clip's timeline. |
| getTime():Void | Get's the current time (seconds advanced). |
| getDuration():Void | Get's the clip's duration. |
| showEmailView():Void | Shows the "email to a friend" form. |
| showEmbedView():Void | Shows the "embed" form that offers the code to embed the current video. |
| getVersion():String | Gets the Flowplayer version number. |
Following methods are not supported by mplayer plugin.
| setConfig(config ) | Configure the player using a FlowPlayer configuration object. This is a JSON object that is documented in configuration document. NOTE: The visible playList will not behave currently if you replace an existing playlist by calling this method with an object that has a different playList! |
| StartBuffering():Void | Starts loading the clip into the buffer memory. Does not start playback. |
| ToggleLoop():Void | Toggless looping on/off. |
| getPercentLoaded():Number | Gets the percentage of buffer memory currently filled with data. |
| getIsPlaying():Boolean | Is the player currently playing? |
| getIsPaused():Boolean | Is the player currently paused? |
| getIsLooping():Boolean | Is the player looping? |
| setPlayerId(playerId):Void | Set's the ID to this player instance. This ID can be later retrieved using getPlayerId() |
| getPlayerId():String | Gets this player's ID. The ID can be initialized usng setPlayerId(). |
| addCuePoint(timeSeconds, name, parameters):Void | Adds a new programmatic cue point. When the cue point's time is reached the onCuePoint callback is called. The onCuePoint callback receives the name and parameters values. You can pass a JSON style object in the 'parameters' parameter. |
| addCuePoints(Array):Void |
Adds a several cue points. Syntax: addCuePoints([{ name: 'cue1', time: 5, parameters: { foo: 1, bar: 'x' } }, { name: 'cue2', time: 45, parameters: { foo: 2, bar: 'xy' } } ]) |
These methods control your playlist and are not not supported by mplayer plugin.
| hasNext():Boolean | Does the playlist have more clips after the current clipP? |
| NextClip():Void | Moves to next clip. |
| PrevClip():Void | Moves to previous clip. |
| getPlayListSize():Number | Gets the number of clips in the playlist. |
| getCurrentClip():Number | Gets the index of the current clip. First clip is at index zero. |
| ToClip(index:Number):Void | Moves to clip at the specified index. |
| playClip(clipObj):Void | Plays the specified clip. Existing playList is discarded and replaced with a a playList containing the specified clip. The clip should be a valid flowplayer clip object that are also used in playLists. |
| setClipURL(clipObj):Void | Creates a new playList that has the specified clip. Existing playList is discarded. The clip should be a valid flowplayer clip object that are also used in playLists. |
These methods are called by the player when some event occurs. These methods are not not supported by mplayer plugin.
| function onFlowPlayerReady() | Called when the player has loaded and is ready to receive scripting methods |
| function onClipDone(clip) | Called when a clip has been played to the end. The clip parameter object has following properties: name, baseUrl, fileName, start (start time in seconds), end (end time in seconds), protected (is hotlink protection applied for this clip?), linkUrl, linkWindow, controlEnabled (enable playback control buttons?) |
| function onClipChanged(clip) | Called when the user manually changes to another clip in the playlist or when the playback moves from one clip to the next. |
| function onLoadBegin(clip) | Called when the loading of a clip begins. |
| function onStreamNotFound(clip) | Called when a clip is not found using it's URL. |
| function onPlay(clip) | Called when playback starts for a playlist. |
| function onStop(clip) | Called when playback of the playlist stops. |
| function onPause(clip) | Called when the player is paused. |
| function onResume(clip) | Called when the player is resumed. |
| function onCuePoint(cuePoint) | Called when a cue point is reached. |
| function onStartBuffering(clip) | Called when a clip starts buffering. |
| function onBufferFull(clip) | Called when the buffer is full and the playback for the specified clip can start. |
| function onBufferFlush(clip) | Called when the buffer is flushed for a clip. |
| function onMetaData(metadataObj) | Called when metadata for the currently playing clip has been received. The metadata object contains following properties: duration (seconds), videodatarate (kbit/s), audiodatarate (kbit/s) and creationdate. |
Quick start
Documentation
JavaScript tools
