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:

  1.  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) {
                          }, (...)
                       } 
                    }      
                 );
    
    
  2. Add player event listeners.

    player.addEventListener(Frequency.Player.Events.onError, errorHandler);
    player.addEventListener(Frequency.Player.Events.onProgress, progressHandler);
  3. 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

The Player class plays videos from HTML5 web apps. The Player supports advertisement playback and beaconing along with standalone video playback transparently. 

Param
Type
Description
elementString or DOMNodeNode selector or DOMNode the player will be inserted into.
optionsObjectFrequency.Player.Options object

Player Constructor

Frequency.Player();
Frequency.Player(
   undefined, {
      video: {
      },
      events: {
      },
      (...)
   }
); 

Constructs a Player object for video playback.

Parameters:

video - The Frequency.Player.Video object containing the video url, playback start position along with whether to auto play the video once loaded.

events - The Frequency.Player.Events object to bind playback event listeners.

Returns:

An initialized Player object.

Player Methods

play

play()

Plays the currently loaded video.

Parameters:

None

Returns:

void

pause

pause()

Pauses the currently playing video.

Parameters:

None

Returns:

void


seekTo

seekTo(time:Number)

Seeks to a specified time in the video.

Parameters:

time - The time position (in seconds) in the video to jump to. 

Returns:

void

  

getDuration

getDuration()

Returns the duration of the currently playing video in seconds.

Parameters:

None

Returns:

Number - The video duration in seconds.

getState

getState()

Returns the video player's current play state.

Parameters:

None

Returns:

Number - The number representing the video playback state. (see video states).

getCurrentTime

getCurrentTime()

Returns the lapsed time since the video start in seconds.

Parameters:

None

Returns:

Number - The lapsed video playback time in seconds.

loadVideo

loadVideo(url:String)

Loads the video url specified by the url string. This does not auto play the video. The onMediaReady event would need to be monitored along with a subsequent video play() method call to cause the loaded video to play.

Parameters:

url - The url of the video to load.

Returns:

void

addEventListener

addEventListener(event:String, callback:String)

Adds a listener function for the specified event. 

Parameters:

event - The event to register for listening. (See Player events)

callback - The event handler method of code block.

Returns:

void 


removeEventListener

removeEventListener(event:String, callback:String)

Removes a listener function for the specified event.

Parameters:

event - The listening event. (See Player events)

callback - The event handler method or code block.

Returns:

void

Player Video Class

Frequency.Player.Options.Video

The Player Video class is a video data structure used for video player initialization along with video playback.

Fields

 

ParamTypeDescriptionDefault
urlStringThe video file url.-
startPostionNumberThe video start position0
autoplayBooleanAutoplay the video after it is loaded.false

Player Events Class

Frequency.Player.Events

The Player Events class defines all the events that listeners can register on.

EventTypeDescription
onErrorFunctionAn error occured.
onReadyFunctionJS player ready for actions.
onMediaReadyFunctionMedia player ready.
onStateChangeFunctionPlayer state has changed.
onProgressFunctionPlayers progress changed.

Video Playback States


StateValue 
UNKNOWNundefinedPlayer state is unknown, player setup process did not finished.
UNSTARTED-1Player media ready but pending play action.
ENDED0Player finished playback.
PLAYING1Player is currently playing a video.
PAUSED2Player paused.
BUFFERING3Player is buffering.
LOCKED4Player locked by internal action.