Page tree

Versions Compared

Key

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

Table of Contents
maxLevel2
stylesquare

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.

...

  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
                       },
                       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

 Player Class

 

Player Constructor

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

 

 

 

Player Methods

 

Player Events

 

Player States 

Player Video Class


Player initialization

Code Block
languagejs
titleExample
firstline1
linenumberstrue
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) {
                },(...)
            }
        }
    );


Demo Page 

 

...


Frequency.Player

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

...