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
Version # | Description |
---|---|
2.0.0 |
Breaking changes:
|
1.3.7 | Fixes:
|
1.3.6 | Fixes:
|
1.3.5 | Fixes:
Player light build (with mp4 player only) |
1.3.4 | Internal testing |
1.3.3 | Support for different video urls (direct, embed) |
1.3.2 | Offline events, bugfixes. |
1.3.0 | Fullscreen API, Activity events errors and change session support |
1.2.1 | Possibility to change API url for activities |
1.2.0 | Video activities, poster, bugfixes |
1.1.0
| Volume control functions and bugfixes. |
1.0.0 | This 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 Browser | Version | Mp4 | HLS | YouTube | Vimeo | DailyMotion |
---|---|---|---|---|---|---|
IE | 10+ | Yes | No | Yes | Yes | No |
Edge | 13+ | Yes | Yes | Yes | Yes | Yes |
FF | 30+ | Yes | 41+ | Yes | Yes | Yes |
Chrome | 35+ | Yes | Yes | Yes | Yes | Yes |
Opera | 30+ | Yes | Yes | Yes | Yes | Yes |
Safari | 6.2+ | Yes | Yes | Flash | Yes | Flash |
Mobile OS | Version | Mp4 | HLS | YouTube | Vimeo | DailyMotion |
---|---|---|---|---|---|---|
Android | 4.4+ | Yes | Yes | Yes | Yes | No |
iOS | 6.0+ | Yes | Yes | Yes | Yes | No |
Windows Phone | 8.1+ | Yes | No | Yes | Yes | Yes |
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 Browser | Version |
---|---|
IE | 11+ |
Edge | 12+ |
FF | 10+ |
Chrome | 15+ |
Opera | 15+ |
Safari | 5.1+ |
Mobile OS | Version |
---|---|
Android | - |
iOS | - |
Windows Phone | IE 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 |
---|---|---|
element | String or DOMNode | Node selector or DOMNode the player will be inserted into. |
options | Object | Frequency.Player.Options object |
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
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 |
---|---|---|
| Function | An error occurred. |
| Function | JS player ready for actions. |
| Function | Media player ready. |
| Function | Player state has changed. |
| Function | Players progress changed. |
onVastEvent | Function | Vast Ad Event occurred. |
onVolumeChange | Function | Player volume has changed. |
onActivityError | Function | Activity call failed. |
Video Playback States
State | Value | Description |
---|---|---|
| undefined | Player state is unknown, player setup process did not finished. |
| -1 | Player media ready but pending play action. |
| 0 | Player finished playback. |
| 1 | Player is currently playing a video. |
| 2 | Player paused. |
| 3 | Player is buffering. |
| 4 | Player locked by internal action.
|
SEEKING | 5 | Played seeking. |
ERROR | 6 | Player interface returned error. |
Code Examples
Demo