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 79 Next »

Summary

Frequency's Javascript video player is built as an end all solution for short form video to support a myriad of third party players, media formats, advertising requirements, financial settlements, and reporting. This document describes the technical capabilities of the player. 

 Player can be loaded as html from https://static.frequency.com/player/<version>/index.html or as standalone js file http://static.frequency.com/player/<version>/_assets/interface.js

Version History

Version #DescriptionFile
2.0.0
  • Ad handled via decisioning server
  • Unified constructors for Player and PlayerLite version
  • Accept resolution and bitrate parameters within player for ad request
  • [Player] Player can't use ad_tag provided by frequency services if player is loaded over HTTPS

  • [Player] Impossible to change AdsConfiguration for loadVideo method.

  • [Player] Event onProgress is received after state PAUSED

  • [Player] Subtitles are enabled by default on YouTube

 

 
1.3.7

Fixes:

  • AC-227 Youtube videos are not filling the entire player field of view
  • LG-154 [Player] versioning support when loading from CDN - Base path param
  • AC-212 All videos cease to play
  • LG-157 [Player] youtube video breaks play

 

 
1.3.6

Fixes:

  • LG-154 - [Player] versioning support when loading from CDN
  • LG-146 - [Player][Android 4.1.2] There is playback in the corner in small size
 
1.3.5Fixes:
  • Player doesn't save mute state for videos.
  • Edge Incorrect handling for Ended and Seek statuses for some videos. 
  • Player throws incorrect state ENDED (Nexus 7)
  • Duplicated events listeners

Player light build (with mp4 player only)

player-1.3.5.zip

player-light-1.3.5.zip

1.3.4Internal testing 
1.3.3Support for different video urls (direct, embed)player-1.3.3.zip
1.3.2Offline events, bugfixes.player-1.3.2.zip
1.3.0

Fullscreen API, Activity events errors and change session support

player-1.3.0.zip
1.2.1Possibility to change API url for activitiesplayer-1.2.1.zip
1.2.0Video activities, poster, bugfixes 

1.1.0

 

Volume control functions and bugfixes.

player-1.1.0.zip

1.0.0This is the first version of the Frequency player that supports VMAP, VPAID, VAST 2.0, VAST 3.0 advertising standards and MP4 and HLS video formats.

 

   


Browsers & Device Support

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


Desktop BrowserVersionMp4HLSYouTubeVimeoDailyMotion
IE10+YesNoYesYesNo
Edge13+YesYesYesYesYes
FF30+Yes41+YesYesYes
Chrome35+YesYesYesYesYes
Opera30+YesYesYesYesYes
Safari6.2+YesYesFlashYesFlash
Mobile OSVersionMp4HLSYouTubeVimeoDailyMotion
Android4.4+YesYesYesYesNo
iOS6.0+YesYesYesYesNo
Windows Phone8.1+YesNoYesYesYes

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:

Fullscreen API support

 The Frequency Javascript video player provides wrapper around Fullscreen API. Supported browsers:

Desktop BrowserVersion
IE11+
Edge12+
FF10+
Chrome15+
Opera15+
Safari5.1+
Mobile OSVersion
Android-
iOS-
Windows PhoneIE Mobile 11+

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 
videoIdNumberVideo id used in video activities 
posterUrlStringUrl to poster image displayed before video playback 

 

Player Constructor

Frequency.Player();
Frequency.Player(
   undefined, {
	  config: {
		basePath: '.'
	  },
	  api: {
		url: 'https://demo.frequency.com'
	  },
	  session: {
          'X-Frequency-Auth': '...',
          'X-Frequency-DeviceId': '...'
	  }
      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.

session - User session tokens required for activities.

api - Api configuration for activities.

config - player configuration.

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(video)

Loads the video specified by the video object. 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:

video - video object described in Player Fields section.

Returns:

void

 

setVolume

setVolume(volume:Number)

Sets player volume.

 Parameters:

 volume - New volume value for player. Value must be in range 0-100 

Returns:

void 

getVolume

getVolume()

Returns current volume for the player.

Parameters:

 none

Returns:

 Number

 

isFullscreen 

isFullscreen()

Returns true if player is in fullscreen mode.

Parameters:

 none

Returns:

 Boolean

requestFullScreen

requestFullScreen()

Tries to put player in fullscreen mode.

Parameters:

 none

Returns:

 none


exitFullScreen

exitFullScreen()

Tries to disable fullscreen mode for player.

Parameters:

 none

Returns:

 none

setSession

setSession(session:Object)

Updates player session for activities.

Parameters:

session - Session object ({'X-Frequency-Auth': '...', 'X-Frequency-DeviceId': '...'})

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.


Player properties

version - current player version

Player Ads Configuration

Frequency.Player.AdsConfig

Ad Fields

Param

Type

Description

adTagUrl

String

VAST document URL

adCuePoints

Number[]

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

Player Events Class

Frequency.Player.Events

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

Event

Type

Description

onError

Function

An error occurred.

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 occurred.
onVolumeChangeFunctionPlayer volume has changed.
onActivityErrorFunctionActivity call failed.

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.

 

SEEKING5Played seeking.
ERROR6Player interface returned error.

 

Code Examples

Initialization

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,
                          adsConfig: {
                              adTagUrl: '/some/url/to/vast.xml',
                              adCuePoints: [12345, 23456, 34567]
                          }
                       },
                       events: {
                          onStateChange: function(state) {
                          },
                          onProgress: function(currentTime) {
                          },
                          onVolumeChange: function(volume) {
                          },(...)
                       } 
                    }      
                 );
    
    
  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({url:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'});
    player.play();

    Here is a demonstration of the video playback and event handling in a typical HTML5 playback scenario:


Demo

Frequency Player Demo

  • No labels