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

 

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>/embed.html or as standalone js file http://static.frequency.com/player/<version>/player.js

Version history

Version #DescriptionDate
3.1.10

Changes:

  • Fix incorrect IMA plugin version
Aug 30, 2019
3.1.9

Changes:

  • IMA support
Aug 18, 2019
3.1.8

Changes:

  • onAdEnded now supports video reloads
Aug 8, 2019
3.1.7

Changes:

  • Support for new Decisioning server
  • Support for new Activities
  • bugfixes
Jun 21, 2019
3.1.6

Changes:

  • Fixed autoplay issue for non ad videos
  • Removed unhandled exception in Promise
  • Added support for fullscreen API
  • Verbose debugger flag
  • Added validation in Ads plugin for mandatory fields
  • Added protocol filtering for ad trackers and media
Sep 22, 2018
3.1.5

Changes:

  • touch support for default controls
Jul 26, 2018
3.1.4

Bugfixes:

  • message bus memory leaks during player deconstruction
  • missing Object.assign polyfill
Jun 20, 2018
3.1.3

Changes:

  • new loadPlaylist method
  • new destroy method

Bugfixes:

  • MS Edge incorrect state fix
Jun 5, 2018
3.1.1

Changes:

  • new ad events adProgress, adEnded

March 8, 2018

 

3.1.0Initial release of new playerFebruary 26, 2018

 

Browsers & Device Support

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

Desktop Browser
Version
Notes
IE10+no HLS support
Edge13+ 
FF30+HLS support from version 44
Chrome35+ 
Opera30+ 
Safari6.2+ 
Mobile OS
Version
Notes
Android4.4+ 
iOS6.0+ 
Windows Phone8.1+no HLS support

 

Usage

Player constructor

Example player constructor
window.player = new Frequency.Player({
    api_url: 'https://qa-lgi-api.frequency.com',
    session: {
        'x-frequency-auth': '373dfd5b-9ab8-4c47-8917-fdcb471a09c2',
        'x-frequency-deviceid': '589a0db3-85a1-f794'
    },
    debug: false,
    controls: true,
    plugins: [
        [
            'Ads',
            {
                params: {
                    url: '//qa-freq-ad-decision.frequency.com',
                    minBitrate: 100, // kbps
                    maxBitrate: 5000, // kbps
                    maxResolution: '720p',
                    minResolution: '720p',
                    deliveryFormat: 'progressive', // progressive / streaming
                    deliveryProtocol: 'https', // http / https
                    format: 'video/mp4',
                    CHILD_DIRECTED_CONTENT: false
                },
                device: {},
                application: {
                    name: 'Web',
                    domain: 'com.frequency',
                    storeLocation: '',
                    bundle: 'com.frequency.player-3.1'
                }
            }
        ]
    ],
    events: {
        stateChange: state => {
            console.log('State', state);
        },
        progress: function (currentTime) {
            console.log('Progress', currentTime);
        },
        error: error => {
            console.error('Error', error);
        },
        ad: data => {
            console.log('Ad', data);
        },
        volumeChange: volume => {
            console.log('Volume', volume);
        },
        ready: () => {
            console.log('Ready');
        }
    },
    element: document.getElementById('video-container')
});

Field description:

  • api_url - url to Frequency API
  • session - object containing valid Frequency session
  • plugins - array of plugins that player will be using
  • events - object containing events that player will be listening on
  • element - DOM object in which player will be constructed
  • debug - verbose debug log

Player events

NameDescription
readyFired when player is initialised and ready to pickup video to play
stateChange

Fired when player state changes. New state is returned with call:

 events: {
        stateChange: state => {
            console.log('State', state);
        },
... 
progress

Fired every 100ms indicating video progress. New current time is returned with call:

 events: {
        progress: function (currentTime) {
            console.log('Progress', currentTime);
        },
... 
error Fired when player errored out. Additional message is returned.
volumeChange Fired when player volume had changed.
ad

 Fired when player is starting to play ad. Additional ad data are returned with call:

 events: {
        ad: data => {
            console.log('Ad title', data.tite);
            console.log('Ad durations', data.duration);
			...
        },
... 
adProgress

 Fired every 100ms indicating ad video progress. New current time is returned with call:

 events: {
        adProgress: function (currentTime) {
            console.log('Progress', currentTime);
        },
... 


adEnded Fired when ad ended.

 

Player states

Player states
const PLAYER_STATES = {
    UNKNOWN: undefined, // Player state is unknown, player setup process did not finished
    UNSTARTED: -1, // Player media ready but pending play action
    ENDED: 0,
    PLAYING: 1,
    PAUSED: 2,
    BUFFERING: 3,
    LOCKED: 4, // Player locked by internal action
    SEEKING: 5,
    ERROR: 6
}; 


Player methods

MethodExampleDescription
loadChannel
window.player.loadChannel('6249759954650138492', options);
Loads set of videos for channel from API.
loadVideo
window.player.loadVideo('6265340815828208309', options);
Loads video from API.
loadPlaylist
window.player.loadPlaylist('6265340815828208309', options);
Loads set of videos for playlist from API.
play
window.player.play();
Starts video playback.
pause
window.player.pause();
Pauses video playback.
seekTo
window.player.seekTo(60);
Navigates video to certain position.
setVolume
window.player.setVolume(volume);

Sets player volume.

volume (int) in range 0-100

getCurrentTime
window.player.getCurrentTime();
Returns current video time.
getDuration
window.player.getDuration();
Returns current video duration.
getState
window.player.getState();
Returns current player state.
getVolume
window.player.getVolume();
Returns current volume
on
window.player.on(eventName, handler);

Binds new listener for event

eventName (string)

handler (function)

off
window.player.off(eventName, handler);
Removes listener for event
once
window.player.once(eventName, handler);

Binds one time listener for event

eventName (string)

handler (function)

destroy
window.player.destroy();
Removes internal player events end dependencies
requestFullscreen
window.player.requestFullscreen();
Requests fullscreen access for player.
exitFullscreen
window.player.exitFullscreen();
Requests exit from fullscreen mode.


 
  • No labels