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
Frequency.Player(); Frequency.Player( undefined, { video: { }, events: { }, (...) } ); |
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 |
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. |
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. |
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 . |