Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 20 Next »

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

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

Return Type


Player Events

Player States 


Player Video Class

Player initialization

Example
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

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


Frequency.Player.Options

ParamTypeDescription
videoObjectFrequency.Player.Options.Video object
eventsObjectFrequency.Player.Events object


Frequency.Player.Options.Video

ParamTypeDescriptionDefault
urlStringVideo file URL. 
startPositionNumberVideo start position.0
autoplayBooleanPlayer will/will not start playing right after loading video file.false

 

Events

Frequency.Player.Events

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

 

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.

 

Methods

MethodReturn TypeDescription
play()VoidPlays the currently loaded video.
pause()VoidPauses the currently playing video.
seekTo(time:Number)VoidSeeks to a specified time in the video (in seconds).
getDuration()NumberReturns the duration of the currently playing video (in seconds).
getState()NumberReturns video players current state.
getCurrentTime()NumberReturns the elapsed time since the video start (in seconds).
loadVideo(url:String)VoidLoads video url specified by url string.
addEventListener(event:String, callback:String)VoidAdds a listener function for the specified event (see: Player events).
removeEventListener(event:String, callback:StringVoidRemoves a listener function for the specified event.


 

  • No labels