Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents
maxLevel3


Devices & Platforms

Frequency's player is supported on the following devices and platforms. 

BrowserEngineVersion
   
   
   

 

Players & Formats

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 supported video formats are:

 

The sequence to using the Frequency Javascript Player is as follows:

...

Code Block
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.   

Code Block
var player = new Frequency.Player(
                undefined, {
                   video: {
                      url: 'clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
                      startPosition: 50,
                      autoplay: true,
                      adsConfig: {
                          adTagUrl: '/some/url/to/vast.xml',
                          adCuePoints: [12345, 23456, 34567]
                      }
                   },
                   events: {
                      onStateChange: function(state) {
                      },
                      onProgress: function(currentTime) {
                      }, (...)
                   } 
                }      
             );

...

Add player event listeners.

Code Block
player.addEventListener(Frequency.Player.Events.onError, errorHandler);
player.addEventListener(Frequency.Player.Events.onProgress, progressHandler);

Play the video.

Code Block
player.loadVideo('http://videoURL.mp4);
player.play();

...

Class Documentation

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 Fields

 

 

Param

TypeDescriptionDefault
urlStringThe video file url.-
startPositionNumberThe video start position0
autoplayBooleanAutoplay the video after it is loaded.

false

 

hlsBooleanEnables MP4 HLS playerfalse
adConfigObjectFrequency.Player.AdsConfig object 

 

 


Player Constructor

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

...

An initialized Player object.


Player Methods

play

Code Block
play()

Plays the currently loaded video.

Parameters:

None

Returns:

void


pause

Code Block
pause()

Pauses the currently playing video.

Parameters:

None

Returns:

void


seekTo

Code Block
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

Code Block
getDuration()

Returns the duration of the currently playing video in seconds.

Parameters:

None

Returns:

Number - The video duration in seconds.


getState

Code Block
getState()

Returns the video player's current play state.

Parameters:

None

Returns:

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


getCurrentTime

Code Block
getCurrentTime()

Returns the lapsed time since the video start in seconds.

Parameters:

None

Returns:

Number - The lapsed video playback time in seconds.


loadVideo

Code Block
loadVideo(url:String [, options])

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.

options - additional options (optional) eg. adsConfig (Frequency.Player.AdsConfig)

Returns:

void


addEventListener

Code Block
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

Code Block
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

Code Block
Frequency.Player.Options.Video

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

Fields 

...

Param

...

false

 

...

Player

...

 

Player Ads Configuration

Code Block
Frequency.Player.AdsConfig

Fields

Param

Type

Description

adTagUrl

String

VAST document URL

adCuePoints

Number[]

array of cue points (seconds or "preroll", "postroll")

...

Event

Type

Description

onError

Function

An error occuredoccurred.

onReady

Function

JS player ready for actions.

onMediaReady

Function

Media player ready.

onStateChange

Function

Player state has changed.

onProgress

Function

Players progress changed.

onVastEventFunctionVast Ad Event occuredoccurred.

Video Playback States

State

Value

Description

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.

 

Code Examples

Initialization

The sequence to using the Frequency Javascript Player is as follows:

  1.  Initialize the Player.

    Code Block
    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.   

    Code Block
    var player = new Frequency.Player(
                    undefined, {
                       video: {
                          url: 'clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
                          startPosition: 50,
                          autoplay: true,
                          adsConfig: {
                              adTagUrl: '/some/url/to/vast.xml',
                              adCuePoints: [12345, 23456, 34567]
                          }
                       },
                       events: {
                          onStateChange: function(state) {
                          },
                          onProgress: function(currentTime) {
                          }, (...)
                       } 
                    }      
                 );
    
    
  2. Add player event listeners.

    Code Block
    player.addEventListener(Frequency.Player.Events.onError, errorHandler);
    player.addEventListener(Frequency.Player.Events.onProgress, progressHandler);
  3. Play the video.

    Code Block
    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