The Frequency JavaScript video player provides a JavaScript class and a set of constructs that makes short form video playback with advertisement a simple task.
The sequence to using the Frequency JavaScript Player is as follows:
Initialize the Player.
var player = new Frequency.Player();
The player can be initialized with video and listener bindings so that it is one-shot ready to play or the player object can be constructed and setting the video to play and event listeners in subsequent method calls.
var player = new Frequency.Player( undefined, { video: { url: 'clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', startPosition: 50, autoplay: true }, events: { onStateChange: function(state) { }, onProgress: function(currentTime) { }, (...) } } );
Add player event listeners.
player.addEventListener(Frequency.Player.Events.onError, errorHandler); player.addEventListener(Frequency.Player.Events.onProgress, progressHandler);
Play the video.
player.loadVideo('http://videoURL.mp4); player.play();
Here is a demonstration of the video playback and event handling in a typical HTML5 playback scenario:
Frequency Player Demo
Player Class
Player Constructor
Frequency.Player(); Frequency.Player( undefined, { video: { }, events: { }, (...) } );
Player Methods
play(); pause(); seekTo(time:Number); getDuration(); getState(); getCurrentTime(); loadVideo(url:String); addEventListener(event:String, callback:String); removeEventListener(event:String, callback:String);
play
play()
Plays the currently loaded video.
Parameters:
None
Returns:
void
pause
Pauses the currently playing video.
Return Type
Parameters
Description
seekTo
Return Type
Parameters
getDuration
Return Type
Parameters
getState
Return Type
Parameters
Play
Return Type
Player Events
Player States
Player Video Class
Player initialization
new Frequency.Player( undefined, { video: { url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', startPosition: 50, autoplay: true }, events: { onStateChange: function (state) { }, onProgress: function (currentTime) { },(...) } } );
Frequency.Player
Param | Type | Description |
---|---|---|
element | String or DOMNode | Node selector or DOMNode the player will be inserted into. |
options | Object | Frequency.Player.Options object |
Frequency.Player.Options
Param | Type | Description |
---|---|---|
video | Object | Frequency.Player.Options.Video object |
events | Object | Frequency.Player.Events object |
Frequency.Player.Options.Video
Param | Type | Description | Default |
---|---|---|---|
url | String | Video file URL. | |
startPosition | Number | Video start position. | 0 |
autoplay | Boolean | Player will/will not start playing right after loading video file. | false |
Events
Frequency.Player.Events
Event | Type | Description |
---|---|---|
onError | Function | An error occured. |
onReady | Function | JS player ready for actions. |
onMediaReady | Function | Media player ready. |
onStateChange | Function | Player state has changed. |
onProgress | Function | Players progress changed. |
States
State | Value | |
---|---|---|
UNKNOWN | undefined | Player state is unknown, player setup process did not finished. |
UNSTARTED | -1 | Player media ready but pending play action. |
ENDED | 0 | Player finished playback. |
PLAYING | 1 | Player is currently playing a video. |
PAUSED | 2 | Player paused. |
BUFFERING | 3 | Player is buffering. |
LOCKED | 4 | Player locked by internal action. |
Methods
Method | Return Type | Description |
---|---|---|
play() | Void | Plays the currently loaded video. |
pause() | Void | Pauses the currently playing video. |
seekTo(time:Number) | Void | Seeks to a specified time in the video (in seconds). |
getDuration() | Number | Returns the duration of the currently playing video (in seconds). |
getState() | Number | Returns video players current state. |
getCurrentTime() | Number | Returns the elapsed time since the video start (in seconds). |
loadVideo(url:String) | Void | Loads video url specified by url string. |
addEventListener(event:String, callback:String) | Void | Adds a listener function for the specified event (see: Player events). |
removeEventListener(event:String, callback:String) | Void | Removes a listener function for the specified event . |