Javascript Video Player

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

PlayerLite can be downloaded as javaScript file from https://static.frequency.com/player/<version>/playerLite.js

Version History

Browsers & Device Support

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

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:

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. 

Player Constructor

new Frequency.Player({
    config: {// optional
        basePath: '.'
    },
    session: {// mandatory
        'x-frequency-auth': '013ffaa2-a64e-4974-a9ee',
        'x-frequency-deviceid': '5680c4f2-e3fd'
    },
    adConfig: {// optional
        minBitrate: 100,
        maxBitrate: 5000,
        maxResolution: '720p',
        deliveryFormat: 'progressive'
    },
    video: {// mandatory
        "video_id": "12345",// mandatory
        "title": "Gangnam Style",
        "description": "Good Dance Video",
        "image_url": "http://image1.frequency.com/uri/w{width}_h{height}_ctrim_tt1406242656000/_/item/1/8/3/2/Kelsey_Grammer_Welcomes_6th_Child_183236961_thumbnail.jpg",
        "deep_link": "frequency://video/12345/-/4-895",
        "media_url": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",// mandatory
        "media_type": "h264",
        "media_types": ["h264", "hls"],
        "resolution": "1080p",
        "resolutions": ["1080p", "720"],
        "duration": 3600,
        "source": "Online",
        "source_id": "X8yZ4f",// mandatory
        "source_url": "http://www.eonline.com/videos/223996/kelsey-grammer-welcomes-6th-child",
        "score": 126,
        "meta_tags": [
            {"network": "Machinima"},
            {"genre": "Gaming"},
            {"subgenre": "Action"},
            {"series": "Random LOL Moments"},
            {"season": "1"},
            {"episode": "489"}
        ],
        "channel": {
            "channel_id": "4-1234",
            "title": "News",
            "image_url": "http://image1.frequency.com/uri/w{width}_h{height}/_/user/1/8/5/0/1385085551000_abc_nightly_news_1850953_avatar.jpg",
        },
        "referrer_link": "https://twitter.com/zgutierrez90/status/446459061161451520",
        "ad_tag": "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=%2F105934051%2FtestAdUnit&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&url=[referrer_url]&description_url=[description_url]&correlator=1485732061110",// mandatory for ads
        "ad_cue_points": [0],// mandatory for ads
        "date_publish": "2014-07-29T14:18:10Z",
        "date_available": "2014-07-29T14:18:10Z",
        "date_expired": "2014-07-29T14:18:10Z",
        "last_updated": "2014-07-29T14:18:10Z",
        "autoplay": true
    },
    events: {// optional
    	onStateChange(state) {
			...
		}  
    }
})

           

Constructs a Player object for video playback.

Constructor also accept element, which will be replaced by video player (* PlayerLite can only accept existing video element)

// element provided as string
new Frequency.Player('#player', {...});
 
// element provided directly as DOM node
new Frequency.Player(document.getElementById('player'), {...});
new Frequency.PlayerLite(document.getElementsByTagName('video')[0], {...});

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(time:Number)

getDuration()

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(event:String, callback:String)

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

Player Events Class

Frequency.Player.Events

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

Video Playback States

Code Examples

Demo

Frequency Player Demo