Universal Web Player SDK Version 3
Introduction
Welcome to the Anvato Web Player documentation. If you are a new user, start coding at Quick Start section with examples that will get you embedding in no time.
Embed options and configuration are discussed at Configuration Options. Common integration questions are answered at Integration section. Finally checkout the Plugins section for advanced use cases.
Quick Start
Embedding a video
-
Add the script tag
<script src='//w3.cdn.anvato.net/player/prod/v3/scripts/anvload.js'></script>
-
Provide a player placeholder
<div id="player"></div>
- Call the init method with player configuration as shown below
AnvatoPlayer("player").init({ url: "//mcp-download.storage.googleapis.com/anv-videos/variant/3697036.m3u8", title: "Sintel" });
The following is a live example:
<script src="//w3.cdn.anvato.net/player/prod/v3/scripts/anvload.js"></script>
<div id="player"></div>
<script>
AnvatoPlayer("player").init({
url: "https://mcp-download.storage.googleapis.com/anv-videos/variant/3697036.m3u8",
width: "100%",
poster: "https://mcp-media.storage.googleapis.com/anv-iupl/5FA/ACA/5FAACA8FB2F3459C81F2CEF515615DAF",
title: "Sintel",
description: "Third Open Movie by Blender Foundation"
});
</script>
Playing a playlist
If you have multiple videos, you can play them as a playlist. Providing an array of objects populated with video URLs in the playlist parameter is sufficient.
AnvatoPlayer("player").init({
"playlist": [
{
url: "URL_1"
title: "TITLE_1",
poster: "POSTER_1"
},
{
url: "URL_2"
title: "TITLE_2",
poster: "POSTER_2"
},
{
url: "URL_3"
title: "TITLE_3",
poster: "POSTER_3"
},
]
});
<script src='//w3.cdn.anvato.net/player/prod/v3/scripts/anvload.js'></script>
<div id="player"></div>
<script>
AnvatoPlayer("player").init({
playlist: [
{
url: "https://mcp-download.storage.googleapis.com/anv-videos/variant/3697596.m3u8",
title: "Elephant`s Dream",
poster: "https://mcp-media.storage.googleapis.com/anv-pvw/AF6/ABE/AF6ABE1D34FE42F3AAD5C72216AC41C7_7.jpg"
},
{
url: "https://mcp-download.storage.googleapis.com/anv-videos/variant/3697658.m3u8",
title: "Cosmos Laundromat",
poster: "https://mcp-media.storage.googleapis.com/anv-pvw/F34/4C3/F344C330F8A147E4AA776B26550AD2EA_8.jpg"
},
{
url: "https://mcp-download.storage.googleapis.com/anv-videos/variant/3697661.m3u8",
title: "Caminandes 2",
poster: "https://mcp-media.storage.googleapis.com/anv-pvw/B98/C0D/B98C0DBDD0404D56AD70119379477993_6.jpg"
}
],
width: "100%"
});
</script>
Configuration Options
Parameter | Type | Definition |
---|---|---|
url | String | External video url. |
format | String | File format for the media asset (e.g. 'm3u8', 'mpd', 'mp4', 'mp3'). |
poster | String | Poster image URL (used in the absence of a default poster image or for overriding the one coming with the metadata) |
live | Boolean | Live mode flag; needed while using external video url. |
title | String | Used for overriding the existing title from metadata/specifying the title for external video url (applies to VOD only) |
description | String | Used for overriding the existing description from metadata/specifying the description for external video url (applies to VOD only) |
width | String | Player width in pixels or percent |
height | String | Player height in pixels or percent |
playlist | Array | Array of media info objects composed of url and additional parameters |
volume | Number | Volume betwen 0 and 1 |
autoplay | Boolean | Autoplay mode |
disableMutedAutoplay | Boolean | Used for disabling muted autoplay. When set to true while autoplay is enabled, the player will either autoplay with sound or not autoplay at all depending on what the browser allows. Default is false. |
plugins | JSON | Contains the plugin parameters. Details are provided in Plugins section. |
expectPreroll | Boolean | Used to prevent the player from starting the main content before a client-side preroll is loaded. Default is false. |
expectPrerollTimeout | Number | Max number of seconds to wait for a client-side preroll before starting the main content. Only used when expectPreroll is true. Default is 5. |
companions | Array of Objects | Used for registering companion containers with their width and height. Companion object format is given below. |
logo | Object | Used for setting a logo overlay. Logo can be set using the API method: setLogo(). Logo object format is provided below. |
share | Boolean | Used for disabling the share feature. Default is true. |
shareLink | String | Used for overriding the share link detected by the player |
clientSideAdTracking | Boolean | Used for pinging the tracking URL specified in VAST to demonstrate ad progress. Default value is true. |
trackTimePeriod | Integer | Used for setting the TIME_UPDATED event period. This value must be to at least 1 (in second). TIME_UPDATED event will not be dispatched if this value is not set to a valid value. |
control | Boolean | This flag is used for removing the player controls. |
enablePictureInPicture | Boolean | This flag determines whether the player controls include a Picture-in-Picture button. Default value is false. |
info | Boolean | This flag is used for removing the components providing info about the content such as title, description, poster image, etc. |
360 | Boolean | Used for enabling 360 view feature |
recommendations | Boolean or Object | Used for enabling recommendation window. Providing true will use recommendations from MCP. Providing false will disable recommendations. To use custom recommendations, provide an object of the form { items: [...] } where the items array has the same format as the vList argument in the Player.setRecommendations(vList) API function. The object may optionally include property duration to specify the default countdown in seconds. Default is false. |
maxRecomPages | Number | Used to determine the maximum number of recommendation pages to show at the end of a playlist. Default is 3. |
token | String | Used for activating the remote config and TVE services such as metadata lookup, schedule, geo station check and parental control. |
styleNativeCaptions | Boolean | For videos that would normally use the browser's native caption settings and styling, setting this flag to true will cause the captions to use the Anvato player's caption settings and styles instead. |
nativeHlsOnSafari | Boolean | Used for forcing native HTML5 video playback for HLS on Safari instead of Anvato's MSE player. Note that when this is true, the player is no longer able to track server-side ads. Default is false. |
nativeHlsOnSafariForVod | Boolean | Similar to nativeHlsOnSafari , but only applies to VOD and not live streams. Default is false. |
nativeHlsOnSafariForLive | Boolean | Similar to nativeHlsOnSafari , but only applies to live streams and not VOD. Default is false. |
learnMore | Object | Used for styling the Learn More button displayed during DFP client-side ads on mobile devices. Learn More object format is provided below. |
pauseOnClick | Boolean | Allows the user to pause the video when clicking on the video instead of the pause button specifically. Default is false. |
liveDelayInSegments | Number | The number of segments from the live edge where the player will start playback for a live stream. For example, a value of 2 will have the player start playing from the second to last segment in the first live manifest. Default is 3. |
Companion Object
AnvatoPlayer("p0").init({
//...,
companions: [
{
width: 160,
height: 600,
containers: [
"companion-holder-1"
]
}
]
});
Parameter | Type | Definiton |
---|---|---|
width | Number | The width of the companion placeholder |
height | Number | The height of the companion placeholder |
containers | Array | List of placeholder ids matching the width and height provided |
Logo Object
AnvatoPlayer("p0").init({
//...,
logo: {
url: "LOGO_URL",
targetURL: "YOUR_TARGET_URL",
location: "BR",
margin: "3%",
sizeFactor: 0.8
}
});
Parameter | Type | Definiton |
---|---|---|
url | String | The logo URL |
targetUrl | String | The target URL to be opened when the logo is clicked/tapped |
location | String | "BR" for bottom right, "TR" for top right, "BL" for bottom left and "TL" for top left |
margin | String | Margin to be calculated from the anchor point specified by location . Must be given in "px" or "%". |
sizeFactor | Number | Used for resizing the logo. Default is 1 which sets the logo height to player height devided by 6. |
Learn More Object
AnvatoPlayer("p0").init({
//...,
learnMore: {
text: 'LEARN MORE',
sizeFactor: 0.8,
border: '0px solid #000',
fontWeight: 600,
//...,
}
});
Parameter | Type | Definition |
---|---|---|
text | String | The text to display on the button. |
sizeFactor | Number | Used for scaling the button font size. Default is 1. |
You may also provide additional parameters that correspond to CSS styles.
Keyboard Controls
AnvatoPlayer('p0').init({
keyMapping: {
playPause: [75, 32], // k or Space
rewind10Seconds: 74, // j
rewind5Seconds: 37, // ArrowLeft
fastForward5Seconds: 39, // ArrowRight
fastForward10Seconds: 76, // l
previousVideo: { // P (Shift + p)
keyCode: 80,
shiftKey: true,
},
nextVideo: { // N (Shift + n)
keyCode: 78,
shiftKey: true,
},
toggleFullscreen: 70, // f
toggleMute: 77, // m
volumeUp5Percent: 38, // ArrowUp
volumeDown5Percent: 40, // ArrowDown
}
});
Keyboard controls can be enabled for various player actions via the keyboardMapping
config parameter. The parameter value should be an object whose keys are the player action names. The values are the keyCode values that trigger the player action.
In case any keyboard modifiers should also be pressed to trigger an action, the keyCode numeric value can be replaced by an object. The object should have a keyCode
property with the numeric keyCode value, and the object may also have any of the following keyboard modifier properties set to true: altKey
, ctrlKey
, metaKey
, shiftKey
.
Additionally, the action can map to an array of keyCode values or objects in case multiple keys should map to the same player action.
Action Name | Description |
---|---|
playPause | Toggles between playing and pausing the video. |
rewind10Seconds | Seeks backwards by 10 seconds. |
rewind5Seconds | Seeks backwards by 5 seconds. |
fastForward5Seconds | Seeks forwards by 5 seconds. |
fastForward10Seconds | Seeks forwards by 10 seconds. |
previousVideo | Plays the previous video in the playlist. |
nextVideo | Plays the next video in the playlist. |
toggleFullscreen | Toggles between entering and exiting fullscreen mode. |
toggleMute | Toggles the volume level between muted and unmuted. |
volumeUp5Percent | Increments the volume level by 0.05. |
volumeDown5Percent | Decrements the volume level by 0.05. |
There are various tools onlines that can help determine which keyCode corresponds to which key on the keyboard, such as this Keyboard Event Viewer.
The keyboard events will only trigger player actions if the player is focused (e.g. the user previously clicked on the player). This avoids unwanted behavior when multiple players are embedded on a single page.
An alternative to these keyboard configurations would be to listen to keyboard events on the application level and call the corresponding player API functions.
DRM Configuration
Widevine or PlayReady DRM configuration
AnvatoPlayer('p0').init({
//...,
drm: {
servers: {
'com.widevine.alpha': 'YOUR_LICENSE_SERVER_URL',
'com.microsoft.playready': 'YOUR_LICENSE_SERVER_URL',
}
}
});
FairPlay DRM configuration
AnvatoPlayer('p0').init({
//...,
drm: {
certificate: 'YOUR_BASE64_ENCODED_FAIRPLAY_CERTIFICATE',
servers: {
'com.apple.fps.1_0': 'YOUR_LICENSE_SERVER_URL'
}
}
});
The player supports playing DRM-protected content by passing the license server URL in the player configuration as shown in the sample code. For streams that use FairPlay DRM, the drm
configuration includes the Base64 encoded FairPlay certificate
as a parameter as well.
API Methods and Events
Accessing Player Instances
Each player instance can be accessed using the 'ready' callback function. This callback will be called once the instance is ready to accept API calls.
Using API Methods on Player Instances
AnvatoPlayer('p0').on('ready', function(playerInstance) {
// Access API methods here
// Either playerInstance or AnvatoPlayer('p0') can be used as a reference
AnvatoPlayer('p0').play();
AnvatoPlayer('p0').seekTo(90);
AnvatoPlayer('p0').setVolume(.5);
AnvatoPlayer('p0').getTitle(onResponse);
AnvatoPlayer('p0').getDuration(onResponse);
});
function onResponse(result) {
console.log('@onResponse result:', result);
}
API methods for which we do not need return values are called using the namespace, player instance name and method name.
API methods from which we are planning to retrieve a return value must be called using a callback function as the first argument. The referenced arguments of the API method must be given in an array if there are more than one arguments. One argument can be entered without array brackets.
Using API Events fired by Player Instances
A specific event can be listened using the on
method. on
method accepts both camel case form of the API events documented and uppercase form of them (for backwards compatibility).
Binding an event listener
AnvatoPlayer('p0').on('metadataLoaded', function(eventId, secondaryId, metadata, rawMetadata) {
// use the arguments here
});
It is also possible to use the listener
callback for listening to all events. All events are directed to the callback method provided by the SDK user by setting the listener callback of AnvatoPlayer singleton.
Unbinding a named event listener
A specific event listener can be turned off as long as it is not an anonymous function.
AnvatoPlayer('p0').on('userPause', onUserPaused);
AnvatoPlayer('p0').off('userPause', onUserPaused);
function onUserPaused() {
console.log('this will not be called since its listener is turned off.');
}
Unbinding all event listeners for an event
In order to remove all listeners for a specific event unbindAll
method can be used. This will even remove the anonymous listeners.
AnvatoPlayer('p0').unbindAll('userPause');
Event Sequence Live Demo
You can view the event progression as well as the common following use cases with this interactive tool
- Loading the player behind an overlay/placeholder and displaying when the playback starts
- Evaluating the proper player load and playback; replacing the player with an alternate content if some events are not received in a timely manner
- Evaluating player load performance
- Page level video analytics based on player events
API Functions
getTitle()
AnvatoPlayer('p0').getTitle(YOUR_CALLBACK_FUNCTION);
Provides the title of current item
Returns | Type |
---|---|
Video title | String |
getDescription()
AnvatoPlayer('p0').getDescription(YOUR_CALLBACK_FUNCTION);
Provides the description of current item
Returns | Type |
---|---|
Video description | String |
getDuration()
AnvatoPlayer('p0').getDuration(YOUR_CALLBACK_FUNCTION);
Provides the duration of current item
Returns | Type |
---|---|
Video duration | Number |
getState()
AnvatoPlayer('p0').getState(YOUR_CALLBACK_FUNCTION);
Returns the player state
Returns | Type |
---|---|
Player state | (States provided in state diagram) |
getEmbedCode()
AnvatoPlayer('p0').getEmbedCode(YOUR_CALLBACK_FUNCTION);
Provides the embed code (described in iframed embed option) for the current video item
Returns | Type |
---|---|
Embed code | String |
getShareLink()
AnvatoPlayer('p0').getShareLink(YOUR_CALLBACK_FUNCTION);
Provides the share link for the current video item
Returns | Type |
---|---|
Share link | String |
getBitrates()
AnvatoPlayer('p0').getBitrates(YOUR_CALLBACK_FUNCTION);
Provides available bitrates in kilobits per second
Returns | Type |
---|---|
Array of available bitrates in kilobits per second | Array |
getCaptionLanguages()
AnvatoPlayer('p0').getCaptionLanguages(YOUR_CALLBACK_FUNCTION);
Provides available caption languages
Returns | Type |
---|---|
Array of available languages | Array |
getCaptionStyle()
AnvatoPlayer('p0').getCaptionStyle(YOUR_CALLBACK_FUNCTION);
Provides the current caption style setting values
Returns | Type |
---|---|
Caption style settings | CaptionStyleSettings |
getCurrentTime()
AnvatoPlayer('p0').getCurrentTime(YOUR_CALLBACK_FUNCTION);
Provides the current time/playhead time
Returns | Type |
---|---|
Current time in seconds | Number |
getPlayerLanguages()
AnvatoPlayer('p0').getPlayerLanguages(YOUR_CALLBACK_FUNCTION);
Provides available player languages (for labels and notifications)
Returns | Type |
---|---|
Array of available languages | Array |
getVolume()
AnvatoPlayer('p0').getVolume(YOUR_CALLBACK_FUNCTION);
Provides the player volume level
Returns | Type |
---|---|
Volume level between 0 and 1 | Number |
isFullscreen()
AnvatoPlayer('p0').isFullscreen(YOUR_CALLBACK_FUNCTION);
Gives player fullscreen mode
Returns | Type |
---|---|
True indicates fullscreen | Boolean |
isPictureInPicture()
AnvatoPlayer('p0').isPictureInPicture(YOUR_CALLBACK_FUNCTION);
Provides player Picture-in-Picture mode
Returns | Type |
---|---|
True indicates Picture-in-Picture | Boolean |
getPreviewState()
AnvatoPlayer('p0').getPreviewState(YOUR_CALLBACK_FUNCTION);
Provides preview state (available when Temp Pass is activated)
Returns | Type |
---|---|
Preview state either PASSIVE, LONG, SHORT or ENTITLEMENT | String |
getViewStatus()
AnvatoPlayer('p0').getViewStatus(YOUR_CALLBACK_FUNCTION);
Used for getting the player’s viewability in the active window/tab (available for private beta clients)
Returns | Type |
---|---|
True for viewable, false for non-viewable | Boolean |
getPlaylistIndex()
AnvatoPlayer('p0').getPlaylistIndex(YOUR_CALLBACK_FUNCTION);
Returns the index of the current playlist item
Returns | Type |
---|---|
Playlist item index | Number |
setBitrate(bitrate)
AnvatoPlayer('p0').setBitrate(864);
Sets the video bitrate
Parameters:
Name | Type | Description |
---|---|---|
bitrate | number | Bitrate in kilobits per second |
setCaption(language)
AnvatoPlayer('p0').setCaption('en');
Sets the caption language
Parameters:
Name | Type | Description |
---|---|---|
language | string | Caption language abbreviation - available with getCaptionLanguages() - |
setCaptionStyle(style)
Sets caption style
Name | Type |
---|---|
style | CaptionStyleSettings |
setPlayerLanguage(language)
AnvatoPlayer('p0').setPlayerLanguage('en');
Sets the player language (labels and notifications)
Parameters:
Name | Type | Description |
---|---|---|
language | String | Player language |
setFullscreen(flag)
//This function must be called after a user interaction.
YOUR_BUTTON.onclick = function() {
AnvatoPlayer('p0').setFullscreen(true);
};
Toggles on/off fullscreen mode. This method should be called based on a user interaction.
Parameters:
Name | Type | Description |
---|---|---|
flag | Boolean | True indicates fullscreen request, false indicates cancel fullscreen request |
setPictureInPicture(flag)
YOUR_BUTTON.onclick = function() {
AnvatoPlayer('p0').setPictureInPicture(true);
};
Toggles Picture-in-Picture mode. This method should be called based on a user interaction.
Parameters:
Name | Type | Description |
---|---|---|
flag | Boolean | True indicates Picture-in-Picture request, false indicates cancel Picture-in-Picture request |
mute()
AnvatoPlayer('p0').mute();
Mutes the player
unmute()
AnvatoPlayer('p0').unmute();
Unmutes the player
setLogo(config)
Sets the player logo that will be displayed as an overlay
AnvatoPlayer('p0').setLogo({
url: 'LOGO_URL_HERE',
location: 'BR',
margin: '5%',
sizeFactor: .8
});
Name | Type | Description |
---|---|---|
config | Object | Object with keys: url, targetURL, location, margin, sizeFactor |
showLogo()
Displays the player logo
AnvatoPlayer('p0').showLogo();
hideLogo()
Hides the player logo
AnvatoPlayer('p0').hideLogo();
setVolume(volume)
Sets the player volume
AnvatoPlayer('p0').setVolume(.5);
Parameters:
Name | Type | Description |
---|---|---|
volume | Number | Decimal number between 0 and 1 |
triggerUserInteraction()
AnvatoPlayer('p0').triggerUserInteraction();
Triggers user interaction which may be needed in preview flows.
play()
AnvatoPlayer('p0').play();
Plays the video content. Note that some browsers block programmatic play attempts for videos until the user manually initiates playback. As a result, this API method should not be used to autoplay videos. Instead pass in the autoplay
embed parameter with the value true
when initializing the player.
play(mediaInfo)
AnvatoPlayer('p0').play({
url: 'https://mcp-download.storage.googleapis.com/anv-videos/variant/3697036.m3u8',
format: 'm3u8',
poster: 'https://mcp-media.storage.googleapis.com/anv-iupl/5FA/ACA/5FAACA8FB2F3459C81F2CEF515615DAF',
title: 'Sintel',
description: 'Third Open Movie by Blender Foundation'
});
Plays another video content associated with the accessKey. This API method is the recommended way for playing another video as opposed to reloading the player SDK.
Parameters:
Name | Type | Description |
---|---|---|
mediaInfo | Object | An object with id entry set to video id to be played |
pause()
AnvatoPlayer('p0').pause();
Pauses the video content
destroy()
AnvatoPlayer('p0').destroy();
Destroys the player instance
seekTo(timeIndex)
Seeks to a given time index
AnvatoPlayer('p0').seekTo(9);
Parameters:
Name | Type | Description |
---|---|---|
timeIndex | Number | Seek position in seconds |
catchLive()
Seeks to the edge of a live stream
AnvatoPlayer('p0').catchLive();
setRecommendations(vList)
Sets the list of video recommendations for the current video
var recommendations = [
{
url: 'https://mcp-download.storage.googleapis.com/anv-videos/variant/3697661.m3u8',
format: 'm3u8',
title: 'Caminandes 2',
description: 'Gran Dillama - Blender Animated Short',
image: 'https://mcp-media.storage.googleapis.com/anv-pvw/B98/C0D/B98C0DBDD0404D56AD70119379477993_6.jpg',
duration: 146
},
{
url: 'https://mcp-download.storage.googleapis.com/anv-videos/variant/3697658.m3u8',
format: 'm3u8',
title: 'Cosmos Laundromat',
description: 'An in-development film project by the Blender Foundation',
image: 'https://mcp-media.storage.googleapis.com/anv-pvw/B98/C0D/B98C0DBDD0404D56AD70119379477993_6.jpg',
duration: 730,
}
];
AnvatoPlayer('p0').setRecommendations(recommendations);
Parameters:
Name | Type | Description |
---|---|---|
vList | Array | A list of objects describing the metadata for each video recommendation. Each object must contain a video url and format ('m3u8', 'mp4', etc.). The objects should also contain a title, description, poster image URL, and video duration in seconds. Optionally, the objects may contain a live property stating whether the video is a live stream or not |
changeProgram(eventId, eventMetadata)
Signals an event or program change for live programs
var eventMetadata = {
title: 'NEW_EVENT_TITLE',
description: 'NEW_EVENT_DESCRIPTION',
rating: 'NEW_EVENT_RATING',
derivedMetadata: {
yourKey: 'YOUR_VALUE',
anotherKey: 'ANOTHER_VALUE',
// ...
},
// ...
}
AnvatoPlayer('p0').changeProgram('NEW_EVENT_ID', eventMetadata);
Parameters:
Name | Type | Description |
---|---|---|
eventId | String | The id of the new event |
eventMetadata | Object | Metadata object with the program info as shown in the sample code. For more information about derived metadata, see the derived metadata section. |
updateDerivedMetadata(derivedMetadata)
Updates the current derived metadata
AnvatoPlayer('p0').updateDerivedMetadata({
yourKey: '',
anotherKey: '',
// ...
});
Parameters:
Name | Type | Description |
---|---|---|
derivedMetadata | Object | An object containing derived metadata key-value pairs |
saveSnapshot()
Saves the current video frame as an image file
function onSnapshot(success) {
if (success) {
console.log('Saved');
} else {
console.log('Failed');
}
}
// saves a snapshot with the default file name and configuration
AnvatoPlayer('p0').saveSnapshot(onSnapshot);
// saves snapshots with custom file names and inferred image types
AnvatoPlayer('p0').saveSnapshot(onSnapshot, 'snapshot.png');
AnvatoPlayer('p0').saveSnapshot(onSnapshot, 'snapshot.jpg');
// saves a snapshot with custom configuration
AnvatoPlayer('p0').saveSnapshot(onSnapshot, {
filename: 'snapshot',
type: 'image/jpeg',
quality: 0.5
});
Parameters:
Name | Type | Description |
---|---|---|
onSnapshot | function | A callback function that is passed true if the snapshot succeeds or false if the snapshot fails |
filename | string | The name of the image file |
saveSnapshot()
alternatively accepts the following parameters:
Name | Type | Description |
---|---|---|
onSnapshot | function | A callback function that is passed true if the snapshot succeeds or false if the snapshot fails |
saveSnapshotConfig | Object | An object describing how the snapshot should be generated |
The saveSnapshotConfig
object has the following properties:
Property | Type | Description |
---|---|---|
filename | string | The name of the image file |
type | string | The MIME type of the image file |
quality | number | A number between 0 and 1 that specifies the compression level for lossy image formats |
getSnapshot()
Gets the current video frame as an image Data URL
function onSnapshot(url) {
if (url) {
console.log(url);
} else {
console.log('Failed to take snapshot');
}
}
// gets a snapshot with the default file name and configuration
AnvatoPlayer('p0').getSnapshot(onSnapshot);
// gets snapshots with MIME types inferred from image file names
AnvatoPlayer('p0').getSnapshot(onSnapshot, 'snapshot.png');
AnvatoPlayer('p0').getSnapshot(onSnapshot, 'snapshot.jpg');
// gets a snapshot with custom configuration
AnvatoPlayer('p0').getSnapshot(onSnapshot, {
type: 'image/jpeg',
quality: 0.5
});
Parameters:
Name | Type | Description |
---|---|---|
onSnapshot | function | A callback function that is passed the image Data URL if the snapshot succeeds or false if the snapshot fails |
filename | string | A file name from which to infer the image type |
getSnapshot()
alternatively accepts the following parameters:
Name | Type | Description |
---|---|---|
onSnapshot | function | A callback function that is passed true if the snapshot succeeds or false if the snapshot fails |
getSnapshotConfig | Object | An object describing how the snapshot should be generated |
The getSnapshotConfig
object has the following properties:
Property | Type | Description |
---|---|---|
filename | string | A file name from which to infer the image type |
type | string | The MIME type of the image |
quality | number | A number between 0 and 1 that specifies the compression level for lossy image formats |
API Events
Event Format
{
sender: {player instance ID},
name: {event name},
time: {event time},
info: {event definition},
args: {array of arguments}
}
Events are dispatched by the player instance using the following format. Sender value is available when IFRAMED JS embed option is utilized since this option supports multiple player instances.
Event List
Event Name | Event definition | Arguments |
---|---|---|
STATE_CHANGE | Player state has changed | Player state |
CLIENT_BANDWIDTH | Client bandwidth estimated | Bandwidth in kilobits per second |
FIRST_FRAME_READY | First frame is ready | None |
PLAYING_START | Player started playing for the first time | Playback origin |
TIME_UPDATED | Playhead updated while playing the video content (Only fired if trackTimePeriod is set in embed parameters) | video time (VOD) / time stamp (Live) in seconds live flag video id video title |
VIDEO_STARTED | Video item started | video ID video title |
VIDEO_FIRST_QUARTILE | Video playhead passed the first quartile | video ID video title |
VIDEO_MID_POINT | Video playhead passed the midpoint | video ID video title |
VIDEO_THIRD_QUARTILE | Video playhead passes the third quartile | video ID video title |
VIDEO_COMPLETED | Video item completed | video ID video title |
PLAYLIST_COMPLETED | All videos in playlist are completed | playlist ID |
AD_STARTED | Ad content started | ad ID ad title ad provider Ad Detail (available for SSAI only) |
AD_FIRST_QUARTILE | Ad content passed the first quartile | ad ID ad title ad provider |
AD_MID_POINT | Ad content passed the mid point | ad ID ad title ad provider |
AD_THIRD_QUARTILE | Ad content passed the third quartile | ad ID ad title ad provider |
AD_COMPLETED | Ad content completed | ad ID ad title ad provider |
ALL_ADS_COMPLETED | All ad videos completed | ad provider |
AD_CLICKED | User clicked on the ad content | ad ID ad title ad provider |
COMPANION_AVAILABLE | A companion is available for injection | payload type creative type width height payload |
USER_INTERACTION | User has interacted with the player | interaction type Content type (“video” or “ad”) id (video id or ad id) |
PREVIEW_STATUS | Preview state has changed | preview state preview/provider ID expiration time |
PREVIEW_EXPIRED | Live preview has finished | preview state |
PROGRAM_CHANGED | Live program has changed | event Id upid (another identifier used as a key for metadata lookup) metadata object with properties: title description rating mvpdAuthenticationNeeded tveCheckNeeded |
NEXT_PROGRAM | Next program information has arrived | event Id upid (another identifier used as a key for metadata lookup) metadata object with properties: title description rating mvpdAuthenticationNeeded tveCheckNeeded |
METADATA_LOADED | Program metadata has changed | event Id upid (another identifier used as a key for metadata lookup) metadata object with properties: title description rating ownerId tags categories |
AUTHENTICATION_STATUS | Authentication status has changed | isAuthenticated authenticator |
AUTHORIZATION_STATUS | Authorization status has changed | isAuthorized authorizer token error code (if failed) |
HOMEZIP_DETECTED | User’s home zip detected | home zip |
ENCRYPTED_HOMEZIP_DETECTED | User’s home zip detected | encrypted home zip |
MAX_RATING_DETECTED | User’s allowed max rating detected | max rating |
PROVIDER_LIST_SET | Provider list is available | Provider look-up table |
PROVIDER_SELECTED | User selected a provider/previously selected provider has been set | provider ID |
PICKER_REQUESTED | MVPD picker has been requested. (This event can be used as an opportunity to display custom MVPD picker dialogs if the default picker is disabled.) | None |
PICKER_DISPLAYED | MVPD picker has been displayed | None |
POPUP_BLOCKED | Browser has blocked the popup | None |
POPUP_DISPLAYED | Browser has allowed the popup | None |
GEOLOCATION_STATUS | User’s geolocation information updated | longitude latitude error code (if failed) |
AD_IMMINENT | There will be an ad break in given seconds | startsIn (seconds) |
SEGMENT_TYPE_CHANGED | Stream segment type has changed (applies to the ad stitched streams) | Segment type (“master”, “ad” or “slate”) |
PROVIDER_IFRAME_INJECTED | Provider IFrame has been injected | Provider Id IFramed Login Placeholder Id |
PROVIDER_IFRAME_REMOVED | Provider IFrame has been removed | IFramed Login Placeholder Id |
VIEW_STATUS | The player is viewable in active window/tab (available for private beta clients) | isViewable (Boolean) |
LOADER_READY | Loader is ready | |
SUBSCRIBER_AUTHORIZATION_STATUS | Subscriber authorization status has changed | authZ status |
PLAYLIST_CHUNK_AVAILABLE | Playlist chunk is available | Array of playlist items |
TIME_DELTA | Time difference between client and server detected | Difference between server time and browser time |
CHROMECAST_STATUS | Chromecast status has changed | chromecast status |
VERIFICATION_STATUS | Chromecast verification status has changed | verification satatus |
PLAYER_ERROR | Player has thrown an error | Error information (Explained in Error Messages section) |
USER_PLAY | User has started the playback | None |
USER_RESUME | User has resumed the content | None |
USER_GOLIVE | User has selected golive | None |
USER_PAUSE | User has paused the playback | None |
USER_MUTE | User has muted the audio | None |
USER_UNMUTE | User has unmuted the audio | None |
USER_SHARE | User has shared a content | None |
USER_FORWARD_SEEK | User has seeked forwards | Current time target time |
USER_BACKWARD_SEEK | User has seeked backwards | Current time target time |
USER_FULLSCREEN | User has toggled on Fullscreen mode | None |
USER_CANCEL_FULLSCREEN | User has toggled off Fullscreen mode | None |
AD_BREAKS | Ad breaks detected in the content | Array of ad breaks |
AD_BREAK_STARTED | Ad break has started | Ad break index Ad index |
AD_BREAK_COMPLETED | Ad break has completed | Ad break index ad index |
BUFFER_LIMIT_UPDATED | Buffer limit has been updated | Buffer limit |
PRESENTATION_UPDATED | Current time, total time or content type has changed. For ads, time index and duration correspond to the ad break with the exception of client-side DFP ads where time index and duration correspond to the current ad. | time index duration presentation content type adIndex total ads in the ad break |
BUFFER_START | Buffering has started | None |
BUFFER_END | Buffering has completed | None |
ID3 | ID3 tag detected | Timed metadata payload publisher |
POSTER_LOADED | Poster image has been loaded | None |
COMPONENTS_INITIALIZED | Player UI components have been initialized | None |
BITRATE_LIST_UPDATED | Bitrate list has been updated with available rendition bitrates | bitrateList resolutionMapping (from bitrate to resolution - WIDTHxHEIGHT in pixels if resolution is available in the manifest- ) |
BITRATE_CHANGED | Bitrate value has been updated | Current bitrate |
BITRATE_CHANGE_IN_PROGRESS | There is a pending birate change | Target bitrate |
TIME_DELTA | Time difference between client and server detected | time delta (msec) |
MEDIA_URLS_SET | Published media URLs are available | Media URL objects array |
BEFORE_VIDEO_LOAD | Player has notified the check point before video load | Video information object Embed configuration |
PLAYLIST_ITEM_CHANGED | Playlist item index has been updated | playlist item index media Id |
CAPTION_DETECTED | The player has detected closed captions | Array of available languages |
AUTOPLAY_STATUS | The player's autoplay capability for the current video based on the browser's autoplay policy. The status value is NONE if there is no intent of autoplay, BLOCKED if the browser completely blocks autoplay, MUTED if muted autoplay is allowed, or UNMUTED if unmuted autoplay is allowed. |
autoplay status |
Playback Origins
Enum for playback origins exposed with PLAYING_START event
Properties
Name | Type | Default |
---|---|---|
INITIAL | number |
0 |
PLAYLIST_MANUAL | number |
1 |
PLAYLIST_AUTO_ADVANCE | number |
2 |
RECOMMENDATION_MANUAL | number |
3 |
RECOMMENDATION_AUTO_ADVANCE | number |
4 |
PLAY_API_METHOD | number |
5 |
Ad Detail
AdDetail : Object
- AdDetail :
Object
- .adIndex :
number
- .totalAds :
number
- .tracking :
Object
- .clickThrough :
Array.<String>
- .clickTracking :
Array.<String>
- .clickThrough :
- .adIndex :
AdDetail.adIndex : number
The ad index within the current ad break
AdDetail.totalAds : number
The total number of ads in the current ad break
AdDetail.tracking : Object
- AdDetail.tracking :
Object
- .clickThrough :
Array.<String>
- .clickTracking :
Array.<String>
- .clickThrough :
tracking.clickThrough : Array.<String>
| null
Click through URI for application layer rendering their own UI to display a page when user clicks on ad video
tracking.clickTracking : Array.<String>
| null
Click tracking URIs for application layer rendering their own UI to track when the user clicks on the ad video
API Hooks
The following API hooks are triggered by certain player events. When an API hook is triggered, the player executes your callback function and uses the returned value before continuing.
NOTE: These API hooks should be registered before calling .init(...) on the player instance.
onBeforeVideoLoad
onBeforeVideoLoad
AnvatoPlayer('p0').on('beforeVideoLoad', function(mediaInfo, initConfig) {
// mediaInfo.id can be used for identifying the asset
// config can be modified based on mediaInfo.id
return initConfig; // finally modified config is returned
});
SDK calls this hook before loading the media and ads. Application layer can modify the initConfig inside this hook and return modified initConfig (typically client-side ad settings are modified).
Parameters:
Name | Type | Description |
---|---|---|
mediaInfo | Object | Media info object in which media is identified with id entry. For external URLs id is populated with the md5 of the media url |
initConfig | Object | Init configuration that is generated by merging application side and remote configuration. Plugins entry is often the point of interest for this hook |
onBeforeSeek
onBeforeSeek
AnvatoPlayer('p0').on('beforeSeek', function(info) {
var adBreakIndexToWatch = null;
// info object can be used to determine which ad break
// to watch before completing the seek. Set the
// adBreakIndexToWatch variable to the desired
// ad break index.
return { watchAdBreakIndex: adBreakIndexToWatch };
});
SDK calls this hook when the user issues a seek but before the player completes the seek. Application layer can return an object that specifies whether the user should first watch an ad break before completing the seek.
Parameters:
Name | Type | Description |
---|---|---|
info | Object | Info object describing the seek and ad break information for the current video. |
The info
object contains the following properties:
- seekFrom:
Number
- The current playhead time in seconds. This is the absolute playhead time that includes both the content and the stitched ad breaks. - seekTo:
Number
- The seek destination in seconds. - adBreaks:
Array<Object>
- An array containing information about the ad breaks for the current video. Each ad break info object contains theadBreakIndex
, thestart
time index of the ad break in seconds, and theend
time index of the ad break in seconds.
Returns | Type |
---|---|
An object with an optional watchAdBreakIndex property. Set this value to an ad break index value (0-indexed) to have the user watch that ad break before completing the seek. By default the player will complete the seek immediately. |
Object |
onBeforeAdBreak
onBeforeAdBreak
AnvatoPlayer('p0').on('beforeAdBreak', function(info) {
var skipAdBreak = false;
// info object can be used to determine whether the
// player should skip the ad break or not. Set the
// skipAdBreak variable to true in order to have the
// player skip the ad break.
return { skipAdBreak: skipAdBreak };
});
SDK calls this hook before each server-side ad break. Application layer can return an object that specifies whether the player should skip the ad break or not (for VOD assets only).
Parameters:
Name | Type | Description |
---|---|---|
info | Object | Info object describing the ad break information. |
The info
object contains the following properties:
- currentTime:
Number
- The current playhead time in seconds. This is the absolute time index that includes both the content and the stitched ad breaks. - adBreakIndex:
Number
- The ad break index for the ad break that is about to play. - adBreaks:
Array<Object>
- An array containing information about the ad breaks for the current video. Each ad break info object contains theadBreakIndex
, thestart
time index of the ad break in seconds, and theend
time index of the ad break in seconds.
Returns | Type |
---|---|
An object with an optional skipAdBreak property. Set this value to true to have the player skip the ad break. By default the player will not skip the ad break. |
Object |
onBeforeBitrateMenuUpdated
onBeforeBitrateMenuUpdated
AnvatoPlayer('p0').onBeforeBitrateMenuUpdated = function(bitrateList, resolutionMapping) {
var resolutionLabels = {};
var resolutionLabel;
var height;
for (var bitrate in resolutionMapping) {
if (!resolutionMapping.hasOwnProperty(bitrate)) {
continue;
}
resolutionLabel = resolutionMapping[bitrate];
resolutionLabel = resolutionLabel.split('x');
if (resolutionLabel.length == 2) {
height = resolutionLabel[1];
resolutionLabel = height + 'p';
}
// showcasing 2 common customizations: friendly labels or picture height
if (useFriendlyLabels) {
resolutionLabels[bitrate] = getFriendlyLabel(height);
} else {
resolutionLabels[bitrate] = resolutionLabel;
}
}
return resolutionLabels;
};
// helper method for converting height to friendly label
function getFriendlyLabel(height) {
height = parseInt(height);
if (height < 360) {
return 'Low';
} else if (height < 480) {
return 'Medium';
} else if (height < 720) {
return 'High';
} else if (height < 2160) {
if (height == 720) {
return 'HD 720';
} else if (height == 1080) {
return 'HD 1080';
}
return 'HD';
} else if (height == 2160) {
return '4K';
}
}
SDK calls this hook before updating the bitrate list displayed with the quality button on control bar for default UI. SDK expects the application layer to return an object with each bitrate value given in the bitrateList as a key mapping to its custom label.
For custom UI this hook is called before calling setAvailableBitrates
. And the returned custom label object is passed to the custom control bar instance using the third argument.
Parameters:
Name | Type | Description |
---|---|---|
bitrateList | Array | List of bitrates in kilobits per second unit |
resolutionMapping | Object | Object with mapping from bitrate to resolution. Resolution is given as a string in the format of WIDTHxHEIGHT in pixel unit. |
Returns | Type |
---|---|
Custom bitrate label mapping from bitrate to custom label. | Object |
Type Definitions
CaptionStyleSettings
Name | Type |
---|---|
fontType | AnvatoPlayer.CaptionStyle.FontType |
fontSize | Number |
textColor | AnvatoPlayer.CaptionStyle.Color |
textAlpha | AnvatoPlayer.CaptionStyle.PresetLevel |
textAlign | AnvatoPlayer.CaptionStyle.TextAlign |
bgColor | AnvatoPlayer.CaptionStyle.Color |
bgAlpha | AnvatoPlayer.CaptionStyle.PresetLevel |
textEdge | AnvatoPlayer.CaptionStyle.TextEdgeStyle |
highlightColor | AnvatoPlayer.CaptionStyle.Color |
highlightAlpha | AnvatoPlayer.CaptionStyle.PresetLevel |
scale | Boolean |
capitalize | Boolean |
override | Boolean |
AnvatoPlayer.CaptionStyle
- .CaptionStyle :
object
- .Color :
enum
- .FontType :
enum
- .TextEdgeStyle :
enum
- .PresetLevel :
enum
- .TextAlign :
enum
- .Color :
CaptionStyle.Color : enum
Kind: static enum of CaptionStyle
Properties
Name | Type | Description |
---|---|---|
WHITE | number |
White color |
TURQUOISE | number |
turquoise color |
BLUE | number |
Blue color |
GREEN | number |
Green color |
YELLOW | number |
Yellow color |
MAGENTA | number |
Magenta color |
RED | number |
Red color |
BLACK | number |
Black color |
CaptionStyle.FontType : enum
Kind: static enum of CaptionStyle
Properties
Name | Type | Description |
---|---|---|
ARIAL | number |
Arial font |
COURIER | number |
Courier font |
GEORGIA | number |
Gerogia font |
LUCIDA_SANS | number |
Lucida Sans font |
TAHOMA | number |
Tahoma font |
TIMES_NEW_ROMAN | number |
Times New Roman font |
VERDANA | number |
Verdana font |
CaptionStyle.TextEdgeStyle : enum
Kind: static enum of CaptionStyle
Properties
Name | Type | Description |
---|---|---|
NONE | number |
No style |
DROP_SHADOW | number |
Drop shadow style |
RAISED | number |
Raised style |
DEPRESSED | number |
Depressed style |
UNIFORM | number |
Uniform style |
CaptionStyle.PresetLevel : enum
Kind: static enum of CaptionStyle
Properties
Name | Type | Description |
---|---|---|
NONE | number |
None - 0% - |
PERCENT_25 | number |
25% |
PERCENT_50 | number |
50% |
PERCENT_75 | number |
75% |
PERCENT_100 | number |
100% |
CaptionStyle.TextAlign : enum
Kind: static enum of CaptionStyle
Properties
Setting textAlign
AnvatoPlayer('p0').setCaptionStyle({
textAlign: AnvatoPlayer.CaptionStyle.TextAlign.CENTER
});
Name | Type | Description |
---|---|---|
DEFAULT | number |
Center for sidecar, left for sidecar from custom origins (CEA-608 and in-manifest webvtt) |
LEFT | number |
Left alignment |
CENTER | number |
Center alignment |
RIGHT | number |
Right alignment |
Error Messages
The player errors are thrown using the events channel using the event format.
Error Format
{
sender: {player instance ID},
name: 'PLAYER_ERROR',
time: {error time},
info: 'The player has thrown an error',
args: [errorCode, errorDefinition, isCritical]
}
Error payload is passed with the args property as shown below. isCritical flag is used for providing the SDK user with the information about whether the playback will stop/not start at all or the error is recoverable.
Error List
Error Code | Error definition | isCritical |
---|---|---|
ADST001 | Failed to get ad breaks | false |
CCSND010 | Failed to encrypt the chromecast load config | false |
DFP010 | DFP plugin encountered an error | false |
DFP020 | SDK enforced ad request timeout has been triggered | false |
DFP021 | SDK enforced ad start timeout has been triggered | false |
DFP022 | SDK enforced ad progress timeout has been triggered | false |
HRTBT001 | Failed to get a valid account ID (RSID) | false |
LOAD010 | Browser is blocking the 3rd Party Cookies. | true |
LOAD020 | Missing/outdated Adobe Flash Player plugin | true |
LOAD021 | Blacklisted Adobe Flash Player plugin version detected | false |
NIEL001 | Nielsen tracking parameters are not given | false |
NIEL002 | Nielsen could not be initialized | false |
PLAY010 | Failed to load the stream | true |
PLAY301 | HLS Plugin load error | true |
PLAY302 | Media is not valid | true |
PLAY303 | Media url is not valid | true |
PLAY304 | Security error when loading media (crossdomain.xml exception) | true |
PLAY305 | Media failed to load due to an I/O error | true |
PLAY306 | Connection timeout | true |
PLAY307 | Http error (4xx) | true |
PLAY308 | Media load failed | true |
PLAY309 | Stream not found | true |
PLAY310 | Playback failed | true |
PLAY311 | Connection failed | true |
PLAY360 | The browser does not support WebGL (http://get.webgl.org/) | false |
PLAY361 | The browser does not support CORS needed for WebGL | false |
PLAY400 | Media error | true |
PLAY410 | The content has expired | false |
PLAY450 | Failed to download master | false |
PLAY455 | The browser does not support the specified video codec | false |
PLAY456 | The browser does not support the specified audio codec | false |
PLAY457 | The browser encountered a media decode error | false |
PLAY458 | Media source is not supported | false |
PLAY459 | Manifest does not have any renditions | false |
PLAY460 | Failed to download all renditions | false |
PLAY461 | All renditions are empty | false |
PLAY462 | All renditions are stale (no new segments) | false |
PLAY470 | All segment download attempts within FAILED_SEQ_LIMIT failed | false |
PLAY480 | Stream media sequence number has reset | false |
PLAY481 | Encountered an unexpected stream media sequence number | false |
PLAY490 | Media buffer dropped below threshold in waiting state longer than expected | false |
PLAY499 | Failed to load the media | false |
PLAY500 | The browser does not support the available formats in the media source | true |
PLAY510 | The browser does not support playback without a user gesture | false |
PLAY511 | The browser does not support autoplay | false |
PLAY512 | Autoplay blocked due to the lacking support in DFP Plugin | false |
PLAY520 | Failed to decrypt segments | false |
PLAY600 | Selected recommendation item is not available. SDK will display the recommendations view again. | false |
PLAY601 | None of the recommendation items are available. SDK will load the last content. | false |
PLAY900 | Schedule service returned an expired event | false |
PLAY920 | No next item in the playlist | false |
PLAY921 | No previous item in the playlist | false |
PLGNL001 | Failed to initialize the plugin | false |
PLGNL002 | Failed to load the library for the plugin | false |
SCOR001 | Failed to get a valid Comscore clientId (c2) | false |
SHAK001 | Shaka media module encountered an issue while loading the stream | true |
SHAK002 | Browser is not supported by Shaka media module to play the stream | true |
SSHR100 | Encountered an error while sending an email to share content | false |
VMNG010 | No published urls in the provided source | true |
VMNG020 | The provided media formats are not supported | true |
VMNG030 | The provided media has expired | true |
MOAT001 | Fail to init moat due to insufficient information provided. | false |
ABR
Configuration
Control the player's ABR behavior by setting the following configuration parameters:
Parameter | Type | Description |
---|---|---|
autoBitrateSwitch | Boolean | Used for disabling the SDK's default auto bitrate switch. Once disabled the SDK will use the initial bitrate value (either SDK default or specified value with initialBitrate). |
initialBitrate | Number | Used for overriding the initial rendition the SDK will select. The value must be specified in kilobits per second. The SDK chooses the rendition with bitrate value closest to specified initialBitrate |
disableAutoBitrateSwitchCap | Boolean | By default, the player caps the maximum bitrate that it will select for automatic bitrate switches based on the player size. Setting this parameter to true will disable this cap. Default is false. |
autoBitrateSwitchCapScale | Number | A value used to scale the automatic bitrate switch cap that is based on the player size. For example, 0 will force the player to automatically use the lowest bitrate rendition, 1 will use the default bitrate switch cap, 2 will double the bitrate switch cap, etc. |
abr | ABRInputConfig |
An object specifying additional ABR settings |
ABRInputConfig
has properties:
Property | Type | Description |
---|---|---|
url | String | The URL of a script that implements custom ABR modules. See the next section. |
enabled | Boolean | Equivalent to the autoBitrateSwitch configuration option. If both options are set, this takes precedence. |
defaultDownlinkEstimate | Number | The downlink bandwidth estimate in bits per second the network estimator should return when not enough network samples have been processed to provide a confident estimate. Default 6e5 (600,000 bits per second) |
defaultRTTEstimate | Number | The round-trip time estimate in seconds the network estimator should return when not enough network samples have been processed to provide a confident estimate. Default 2 |
restrictions | ABRRestrictionsConfig |
An object describing bandwidth and resolution restrictions |
ABRRestrictionsConfig
has properties:
Property | Type | Description |
---|---|---|
min | VideoStreamRestrictions |
An object describing minimum video stream restrictions |
max | VideoStreamRestrictions |
An object describing maximum video stream restrictions |
VideoStreamRestrictions
has properties:
Property | Type | Description |
---|---|---|
width | Number | The width of the video stream in pixels |
height | Number | The height of the video stream in pixels |
pixels | Number | The number of pixels in the video stream (width x height) |
bandwidth | Number | The bandwidth of the video stream in bits per second |
Custom ABR Modules
The player supports custom ABR logic. Set abr.url
to the url of a script that defines the custom behavior. This script should assign custom implementations of NetworkEstimator
, BitrateAdapter
, and VariantGenerator
to window.anvp
.
AnvatoPlayer('custom').init({
url: "https://mcp-download.storage.googleapis.com/anv-videos/variant/3697661.m3u8",
width: "100%",
poster: "https://mcp-media.storage.googleapis.com/anv-pvw/B98/C0D/B98C0DBDD0404D56AD70119379477993_6.jpg",
title: "Caminandes 2",
description: "Gran Dillama - Blender Foundation",
abr: {
url: 'abr.js'
}
});
// abr.js
window.anvp.NetworkEstimator = NetworkEstimator;
window.anvp.BitrateAdapter = BitrateAdapter;
window.anvp.VariantGenerator = VariantGenerator;
// see custom implementations below
Network Estimator
The network estimator estimates the client's network bandwidth given segment download information.
new NetworkEstimator(config, samples)
Construct a new NetworkEstimator instance
Param | Type | Description |
---|---|---|
config | ABRConfig |
ABR configuration object generated from the player configuration parameters |
samples | Array<NetworkSample> |
Array of recent network samples used to initialize the network estimator. Older samples appear first in the array. |
ABRConfig
has properties:
Property | Type | Description |
---|---|---|
url | String | The url of the custom ABR module script, if specified |
enabled | Boolean | Whether bitrate adaptation is enabled on start |
initialBitrate | Number | The initial target bitrate in bits per second |
disableAutoBitrateSwitchCap | Boolean | Whether the bitrate switch cap is enabled |
autoBitrateSwitchCapScale | Number | The scale applied to the bitrate switch cap |
defaultDownlinkEstimate | Number | The downlink bandwidth estimate in bits per second the network estimator should return when not enough network samples have been processed to provide a confident estimate. Default 6e5 (600,000 bits per second) |
defaultRTTEstimate | Number | The round-trip time estimate in seconds the network estimator should return when not enough network samples have been processed to provide a confident estimate. Default 2 |
restrictions | ABRRestrictionsConfig |
An object describing bandwidth and resolution restrictions |
NetworkSample
has properties:
Property | Type | Description |
---|---|---|
bytes | Number | Segment size in bytes |
duration | Number | Segment download time in seconds, starting when the request was sent, and ending when the last byte was received |
downlink | Number | Network downlink bandwidth in bits per second observed when downloading segment |
rtt | Number | Network round-trip time in seconds observed when downloading segment |
NetworkEstimator.sample(sample)
Called when a new network sample is available
Param | Type | Description |
---|---|---|
sample | NetworkSample |
ABR configuration object |
NetworkEstimator.getDownlinkEstimate()
Returns the estimated network downlink bandwidth in bits per second
NetworkEstimator.getRTTEstimate()
Returns the estimated network round-trip time in bits per second
NetworkEstimator.hasGoodDownlinkEstimate()
Returns whether the estimator has collected enough sample data to provide an accurate network downlink bandwidth estimate
NetworkEstimator.hasGoodRTTEstimate()
Returns whether the estimator has collected enough sample data to provide an accurate network round-trip time estimate
function NetworkEstimator(config, samples) {
this.defaultDownlinkEstimate_ = config.defaultDownlinkEstimate;
this.defaultRTTEstimate_ = config.defaultRTTEstimate;
this.sample_ = samples[samples.length - 1];
}
NetworkEstimator.prototype = {
sample: function(sample) {
this.sample_ = sample;
},
getDownlinkEstimate: function() {
return this.hasGoodDownlinkEstimate()
? this.sample_.downlink
: this.defaultBandwidthEstimate_;
},
getRTTEstimate: function() {
return this.hasGoodRTTEstimate()
? this.sample_.rtt
: this.defaultRTTEstimate_;
},
hasGoodDownlinkEstimate: function() {
return this.sample_ !== undefined;
},
hasGoodRTTEstimate: function() {
return this.sample_ !== undefined;
}
};
Bitrate Adapter
The bitrate adapter chooses the best variant among the candidate variants.
new BitrateAdapter(config)
Construct a new BitrateAdapter instance
Param | Type | Description |
---|---|---|
config | ABRConfig |
ABR configuration object generated from the player configuration parameters |
BitrateAdapter.chooseVariant(variants, context)
Returns the best variant given the current context or undefined
if no variant could be selected
Param | Type | Description |
---|---|---|
variants | Array<Variant> |
Array of candidate variants |
context | ABRContext |
An object containing information useful for variant selection |
Variant
has properties:
Property | Type | Description |
---|---|---|
bandwidth | Number | The combined bandwidth in bits per second of the variant's video and audio streams |
video | Stream |
The variant's video stream |
audio | Stream |
The variant's audio stream. For HLS, this is undefined . |
Stream
has properties:
Property | Type | Description |
---|---|---|
bandwidth | number | The bandwidth in bits per second of the stream |
An ABRContext
has properties:
Property | Type | Description |
---|---|---|
Variant | Variant |
The previously selected variant, if any, otherwise undefined |
segment | SegmentContext |
An object describing the segment for which a variant is being selected |
network | NetworkContext |
An object describing the client's network conditions |
buffer | BufferContext |
An object describing the player's buffer status |
stream | StreamContext |
An object describing the currently playing video stream |
maxHardwareRestrictions | VideoStreamRestrictions |
An object describing video stream bandwidth and resolution limits |
SegmentContext
has properties:
Property | Type | Description |
---|---|---|
duration | Number | Duration in seconds of segment |
NetworkContext
has properties:
Property | Type | Description |
---|---|---|
downlink | Number | The estimated network downlink bandwidth in bits per second |
rtt | Number | The estimated network round-trip time in seconds |
BufferContext
has properties:
Property | Type | Description |
---|---|---|
available | Number | The duration in seconds of downloaded content remaining for playback |
pending | Number | The duration in seconds of remaining undownloaded content |
StreamContext
has properties:
Property | Type | Description |
---|---|---|
type | String | 'LIVE' for live stream or 'VOD' for VOD streams |
format | String | 'HLS' for HLS streams or 'DASH' for DASH streams |
BitrateAdapter.isGoodVariant(variant, context)
Returns whether the given variant is a satisfactory choice given the current context.
Param | Type | Description |
---|---|---|
variant | Variant |
Variant |
context | ABRContext |
An object containing information useful for variant selection |
function BitrateAdapter(config) {}
BitrateAdapter.prototype = {
chooseVariant(variants, context) {
variants.sort((v1, v2) => v1.bandwidth - v2.bandwidth);
var chosen = variants[0];
for (var i = 1; i < variants.length; i++) {
if (this.isGoodVariant(variants[i], context)) {
chosen = variants[i];
}
}
return chosen;
},
isGoodVariant(variant, context) {
var segment = context.segment;
var buffer = context.buffer;
var network = context.network;
var contentTime = segment.duration * variant.bandwidth / network.downlink;
var sustainable = segment.duration >= network.rtt + contentTime;
if (!sustainable || buffer.available === 0) return sustainable;
return network.rtt + contentTime < buffer.available;
}
};
VariantGenerator
The variant generator pairs video streams with audio streams to generate the variants used for adaptation.
new VariantGenerator(config)
Construct a new VariantGenerator instance
Param | Type | Description |
---|---|---|
config | ABRConfig |
ABR configuration object generated from the player configuration parameters |
VariantGenerator.getDashVariants(videoStreams, audioStreams)
Returns an array of video stream/audio stream pairs used for adaptation. Each member of the returned array should be an object with property video
set to a video stream and property audio
set to an audio stream.
Param | Type | Description |
---|---|---|
videoStreams | Array<Stream> |
An array of candidate video streams |
audioStreams | Array<Stream> |
An array of candidate audio streams |
function VariantGenerator(config) {}
VariantGenerator.prototype = {
getDashVariants(videoStreams, audioStreams) {
if (videoStreams.length === 0 || audioStreams.length === 0) return [];
var variants = [];
for (var i = 0; i < videoStreams.length; i++) {
variants.push({
video: videoStreams[i],
audio: audioStreams[0]
});
}
return variants;
}
};
Integration FAQs
Embed Options
- Embedding with the SCRIPT tag
This is the embed option we will be covering in this development guide. Publishers are supposed to use this option to use entitlement services, companion ads, dynamic resizing (keeping the aspect ratio) and get the maximum performance in terms of page load time.
The SDK embeds the player inside a dynamically generated IFRAME. The SDK accesses the player instance using API methods and events from the parent page in which the player is embedded.
- Embedding with the IFRAME tag
This embed option is available for the viewers of your content as an IFRAME embed code from the social share view of the player. Additionally, the publishers making use of AMP pages can use this option to embed a player on their AMP compliant pages.
Configuration
Player Init Configuration
AnvatoPlayer("player1").init({
url: "VIDEO_URL",
plugins: {
// Please refer to the PLUGIN PARAMETERS section provided in IFRAMED JS Embed Option
}
});
Each player needs to have an instance name passed to the AnvatoPlayer singleton. Plugin information can be entered in plugins entry using the format on the right.
Remote Configuration
Instead of entering comprehensive parameters for common work flows, the SDK user may prefer using the remote configuration. This remote configuration is activated using the embed parameter accessKey
. While using the remote config, the parameters in remote configuration can be overridden using the player init configuration.
While using player init configuration, it is sufficient to remove an entry of a feature to disable it. However while using the setting from remote config associated with the accessKey
, the features such as preview must be explicitly set to false in order to disable it.
Embedding Player
<script src="//w3.cdn.anvato.net/player/prod/v3/scripts/anvload.js"></script>
<div id="player1"></div>
AnvatoPlayer("player1").init({
url: "YOUR_STREAM.M3U8",
});
- Add the player script tag to your page.
- You can determine the location of player optionally by creating a div element and making its id match the player instance id passed to the AnvatoPlayer singleton.
- Pass the player instance name that matches the player placeholder div id in the previous step to AnvatoPlayer singleton. And finally call init method populated with the init configuration to load the player.
Setting the player size
The width and height of the player can be set using the embed parameters width
and height
. The values must be in pixel and specified with "px" suffix, e.g. "width": "720px". If not specified, the player will use 640 x 360 default size.
Dynamic Resizing
Dynamic resizing is available by setting the width with a value in percent. For instance; "width":"80%" will automatically adjust the height using the aspect ratio on window resize/orientation change events.
A comprehensive list of parameters are provided in IFRAMED JS Embed Option section.
Configuration Priority
- Higher priority: Settings inside
AnvatoPlayer(PLAYER_INSTANCE).init(INIT_CONFIG)
- Lower priority: Settings coming from remote config activated by
accessKey
Embedding Multiple Players
<div id="player2"></div>
<script>
AnvatoPlayer("player2").init({
url: "YOUR VIDEO URL"
});
</script>
<div id="player3"></div>
<script>
AnvatoPlayer("player3").init({
url: "YOUR VIDEO URL"
});
</script>
You can repeat the last two steps for adding other player instances.
Processing the Companions
Anvato Universal Player provides two options for processing the companions.
- The companion placeholders are populated by player,
- The programmer handles the companions.
The companion placeholders are populated by player
AnvatoPlayer("p0").init({
... // video parameters
plugins: {
// ad plugin information here
},
companions:[
{width:160, height:600, containers:["companion-holder-1"]},
{width:300, height:250, containers:["companion-holder-2"]},
{width:468, height:60, containers:["companion-holder-3"]}
]
});
This option is the suggested and easiest option for placing the companions on your page. The programmer is only supposed to register the companion placeholders with their ids and dimensions. The player will populate the companions in an appropriate placeholder.
The programmer handles the companions
AnvatoPlayer("p0").on("companionAvailable", processCompanion);
function processCompanion(payloadType, creativeType, width, height, payload) {
var data = decodeURIComponent(payload.data),
clickTarget = payload.clickTarget,
creativeView = payload.creativeView;
// Process the companion data based on the provided information
}
When the player detects a server side-stitched or client-side companion ad, it fires the event COMPANION_AVAILABLE
. This event contains all data needed for processing the companion payload and finally placing in the placeholder:
- payload type: This value is either
static
,html
oriframe
. - creative type: This only applies to the static payload. Possible values are
image/jpeg
,application/x-shockwave-flash
, etc. When this value is populated the payload will have an url as data for the creative. Additionally, the clickTarget and creativeView urls in the payload must be used appropriately by the programmer to make the companion fully functional. - width: companion width
- height: companion height
- payload: This attribute is populated with an object with the following attributes:
- data: URI encoded payload to be injected into the appropriate placeholder or a url to a static/iframe typed resource.
- clickTarget: Only applies to static payloads with an image resource.
- creativeView: This is only available when the companion requires view tracking; mostly used with static payload and image creative types.
In this option placeholders should not be registered using the companions
embed parameter.
Plugins
Plugins are activated only if their configurations are entered correctly.
While most parameters in plugins are static that can be entered by the developer integrating the player SDK into their page, some others may require dynamic information that changes with each content. To support this use case the following macros are available when used under keyValues
entry for ad plugins and under comscore
for Comscore Analytics plugin. These macros must be wrapped with double square brackets and passed as string.
YOUR_KEY_1: '[[VIDEO_ID]]'
Available macros:
- MCP_ID,
- VIDEO_ID,
- OWNER_ID,
- CATEGORIES,
- TITLE,
- DESCRIPTION,
- DURATION,
- PROGRAM_NAME,
- IS_OFFSITE
- COMSCORE_CLIP_LENGTH
DFP Parameters (Client-side)
While the DFP configuration can be provided to the player SDK during initialization, the player SDK also allows using the onBeforeVideoLoad hook to modify the existing ad configuration before each video.
plugins: {
dfp: {
clientSide: {
adTagUrl: 'YOUR AD TAG URL',
keyValues: {
YOUR_KEY_1 : 'YOUR VALUE #1',
YOUR_KEY_2 : 'YOUR VALUE #2'
}
}
}
}
Plugin Name | Namespace | Parameters | Definition |
---|---|---|---|
dfp | clientSide | adTagUrl | Ad tag URL provided by DFP ad server |
keyValues | Key-value pairs sent to the DFP (Optional) | ||
shareKeyValues | Key-value pairs sent to the DFP for shared videos only (Optional) | ||
fullAdClickableOnMobile | If true, the entire ad will be clickable on mobile instead of just the "Learn More" button (Optional, default false) | ||
iosCustomPlayback | If true, then custom playback will be used for DFP ads on Safari for iOS 10+. This means prerolls can be viewed in fullscreen mode with the caveat that users cannot clickthrough to visit advertisers' sites in fullscreen mode. Skippable ads are also not supported using custom playback (Optional, default false) | ||
disableCustomClickTracking | If true, then the player will not use its own "Learn More" button for client-side DFP ads on mobile web. Instead, the IMA SDK will handle the click tracking and clickthroughs (Optional, default false) | ||
enablePreloading | If true, then the IMA SDK will attempt to preload the video ad assets in advance. See the IMA SDK documentation for limitations (Optional, default false) | ||
vpaidMode | Sets the IMA SDK VPAID mode. Allowed values are 'enabled' , 'insecure' , or 'disabled' . (Optional, default is 'enabled' on iOS and 'insecure' on all other platforms) |
Moat for DFP Parameters (Client-side)
Moat configuration for client-side DFP Moat ad tracking.
plugins: {
moat: {
clientSide: {
partnerCode: 'YOUR PARTNER CODE'
}
}
}
Plugin Name | Namespace | Parameters | Definition |
---|---|---|---|
moat | clientSide | partnerCode | Partner code provided by Moat |
Moat Parameters (Server-side)
Moat configuration for server-side Moat ad tracking.
plugins: {
moat: {
serverSide: {
partnerCode: 'YOUR PARTNER CODE'
}
}
}
Plugin Name | Namespace | Parameters | Definition |
---|---|---|---|
moat | serverSide | partnerCode | Partner code provided by Moat |
IAS Parameters
IAS plugin configuration
plugins: {
ias: {
anId: 'AD NETWORK ID',
pubOrder: 'YOUR OWN VIDEO ORDER',
pubId: 'YOUR OWN ADVERTISER', // When non-AdX creatives are used
custom: 'customValue', // Custom key value pairs can be added.
custom2: '[[VIDEO_ID]]', // Their values can be populated with macros mentioned above.
custom3: '[[TITLE]]',
}
}
Plugin Name | Parameters | Definition |
---|---|---|
ias | anId | Ad network ID provided by IAS |
pubOrder | Video order | |
pubId | Advertiser ID (when non-AdX creatives are used) | |
(customKey) | Any custom key-value pair can be given to send custom parameters. (Optional) |
FreeWheel Parameters (Client-side)
plugins: {
freewheel: {
clientSide: {
networkId: 'YOUR NETWORK ID',
serverURL: 'FREEWHEEL SERVER URL',
profileId: 'YOUR PROFILE ID',
videoAssetId: 'YOUR VIDEO ASSET ID',
siteSectionId: 'YOUR SECTION ID',
siteSectionFallbackId: 'YOUR FALLBACK SECTION ID',
maxDuration: 30,
minDuration: 15,
requestDuration: 5,
keyValues: {
YOUR_KEY_1 : 'YOUR VALUE #1',
YOUR_KEY_2 : 'YOUR VALUE #2'
}
}
}
}
FreeWheel prefers providing different renditions with specific configurations. In accordance with that, flash configuration must be written under flash namespace while html5 configuration is written under html5 namespace as shown below and in the sample code. Similar to the DFP client-side plugin, the onBeforeVideoLoad hook can be used to modify the existing ad configuration before each video.
Plugin Name | Namespace | Parameters | Definition |
---|---|---|---|
freewheel | clientSide | networkId | Network ID provided by FreeWheel |
serverURL | FreeWheel ad server URL provided by FreeWheel | ||
profileId | Profile ID provided by FreeWheel | ||
videoAssetId | Video Asset ID provided by FreeWheel | ||
keyValues | Key-value pairs sent to the FreeWheel (Optional) | ||
siteSectionId | Site Section ID provided by FreeWheel | ||
siteSectionFallbackId | A site section ID used when the site section ID in the ad request is not recognized (Optional) | ||
source | Url location of the Freewheel library (AdManager.js). The source cannot be overriden using the onBeforeVideoLoad hook (Optional) | ||
maxDuration | Maximum duration of the ad slots allowed in seconds (Optional) | ||
minDuration | Minimum duration of the ad slots allowed in seconds (Optional) | ||
durationType | The duration type of the ad video asset, either 'exact' or 'variable'. Corresponds to the vdty Freewheel parameter (Optional) |
||
requestDuration | The duration value in seconds for which the player is requesting ads. Corresponds to the vrdu Freewheel parameter (Optional) |
||
amcb | Set this to true to enable the +amcb flag, also known as the requiresAdvancedCallbackUrls flag (Optional) |
||
rste | Set this to true to enable the +rste flag which resets the exclusivity scope (Optional) |
||
sync | Set this to true to enable the +sync flag (Optional) |
FreeWheel Parameters (Server-side)
plugins: {
freewheel: {
serverSide: {
networkId: 'FREEWHEEL_NETWORK_ID',
serverURL: 'FREEWHEEL SERVER URL',
profileId: 'FREEWHEEL_PROFILE_ID',
siteSectionId: 'FREEWHEEL_SITE_SECTION_ID',
videoAssetId: 'VIDEO_ASSET_ID',
companion: 'COMPANION_PARAMETERS',
custom: {
'MACRO_LABEL': 'MACRO_VALUE',
...
}
}
}
}
These parameters are used for activating the server-side ad-stitching.
Plugin Name | Namespace | Parameters | Definition |
---|---|---|---|
freewheel | serverSide | networkId | Network ID provided by FreeWheel |
serverURL | FreeWheel ad server URL provided by FreeWheel | ||
profileId | Profile ID provided by FreeWheel | ||
siteSectionId | Site Section ID provided by FreeWheel | ||
videoAssetId | Video Asset ID provided by FreeWheel | ||
companion | Companion configuration string must be entered here in order to activate companions (Optional) | ||
eventType | The type of event (Optional) | ||
mvpd | MVPD Id (Optional) | ||
custom | Mapping for macro replacement in the freewheel URL (Optional) |
Google Cast
The following configuration must be used for enabling cast workflow on the player SDK.
plugins: {
chromecast: {
appId: '9D26E851', // or B2B242EB to use Cast Application Framework (CAF) SDK
},
},
Plugin Name | Parameters | Definition |
---|---|---|
cast | appId | Receiver application ID. Either default receiver app IDs (9D26E851 for v1 and B2B242EB for v2) or a custom receiver app ID can be used. Custom receiver app shall be implemented using the ARCF documentation, deployed to a public location. And finally it needs to be registered and published on the cast console to obtain an app ID. |
Google Analytics
The following configuration must be used for enabling Google Analytics service including custom metadata tracking.
plugins : {
googleAnalytics : {
trackingId : 'YOUR GOOGLE ANALYTICS TRACKING ID',
events : {
'WEB_SDK_EVENT_NAME':{
alias : 'YOUR GOOGLE ANALYTICS EVENT NAME FOR THIS EVENT',
category : 'YOUR GOOGLE ANALYTICS CATEGORY NAME',
label : 'YOUR GOOGLE ANALYTICS LABEL',
metric : 'YOUR METRIC IN FORMAT OF metric_X'
}
},
dimensions : {
'YOUR DIMENSION IN FORMAT OF DIMENSION_X':'CUSTOM VALUE/MACRO',
//...
}
}
}
plugins : {
googleAnalytics : {
trackingId : 'YOUR GOOGLE ANALYTICS TRACKING ID',
events: {
'WEB_SDK_EVENT_NAME' : 'YOUR GOOGLE ANALYTICS EVENT NAME FOR THIS EVENT'
},
dimensions : {
'YOUR DIMENSION IN FORMAT OF DIMENSION_X':'CUSTOM VALUE/MACRO',
//...
}
}
}
Plugin Name | Parameters | Required/Optional | Definition |
---|---|---|---|
googleAnalytics | trackingId | Required | Tracking ID provided by Google Analytics |
events | Optional | Object/String specifying the details of the Google Analytics event. When the value is a string type, the string will be used as the value of eventAction in the Google Analytics request along with default values "Videos" in eventCategory and Title of the current video in the eventLabel. Users can overwrite those values by providing an object to specify the event alias, category and label as well as adding metric to the request. When this field is not specified, all SDK events will be sent. | |
dimensions | Optional | Object specifying the list of custom dimensions. If this parameter is set, Web Player SDK will attach the custom dimensions with their values to each event request sends to Google Analytics. |
Anvato Analytics Parameters
plugins: {
analytics: {
pdb: 'YOUR PUBLISHER ID'
}
}
Plugin Name | Parameters | Definition |
---|---|---|
analytics | pdb | Publisher ID provided by Anvato |
Adobe Analytics
Omniture (AppMeasurement) Parameters
AnvatoPlayer('p0').init({
...,
profile: 'YOUR_PROFILE_ID', // if you are provided with one (typically used for multiple omniture profiles per client)
plugins: {
omniture: {
account: 'YOUR ACCOUNT ID',
trackingServer: 'TRACKING SERVER URL'
}
}
});
The following configuration must be used after specifying a coordinated profile id under common or player specific configuration. Sample code demonstrates setting the profile and omniture parameters.
Plugin Name | Parameters | Definition |
---|---|---|
omniture | account | Account ID provided by Omniture |
trackingServer | Tracking server provided by Omniture. Multiple tracking servers separated by comma can be entered. |
Heartbeat Parameters
The following configuration must be used for enabling Heartbeat Analytics service including custom metadata tracking.
AnvatoPlayer('p0').init({
...,
profile: 'YOUR_PROFILE_ID', // if you are provided with one (typically used for multiple heartbeat profiles per client)
plugins: {
heartbeat: {
marketingCloudId: 'YOUR_MARKETING_CLOUD_ID',
customTrackingServer: 'YOUR_CUSTOM_TRACKING_SERVER',
trackingServer: 'YOUR_TRACKING_SERVER',
jobId: 'YOUR_JOB_ID',
account: 'YOUR_ACCOUNT_ID',
publisherId: 'YOUR_PUBLISHER_ID',
version: '1.5'
}
}
});
Plugin Name | Parameters | Definition |
---|---|---|
heartbeat | marketingCloudId | Marketing Cloud ID provided by Adobe |
customTrackingServer | This parameter is used for specifying the servers processing the custom metadata (Typically Adobe Visitor and AppMeasurement servers). Multiple tracking servers seperated by comma can be entered. | |
trackingServer | Tracking server for Heartbeat provided by Adobe. | |
jobId | Job ID provided by Adobe. | |
account | account ID provided by Adobe. | |
publisherId | publisher ID provided by Adobe. | |
version | must be set to '1.5' to use the current latest stable Adobe Heartbeat Library or a later version for an early adoption (availability is subject to the coordination with Anvato). | |
chapterTracking | Used for toggling chapter tracking. When chapterTracking is not set to false (default is true), the chapter boundaries are VIDEO_STARTED and AD_STARTED/VIDEO_COMPLETED events for VOD, and PROGRAM_CHANGED event for Live. Also for live stream, the chapter tracking causes name and friendlyName to be based on static metadata since the schedule based dynamic metadata is passed to the each chapterInfo. | |
marketingCloudVisitorId | The user's marketing cloud visitor id value. (Optional) | |
analyticsVisitorId | The user's analytics visitor id value. (Optional) |
plugins: {
heartbeat: {
marketingCloudId: 'YOUR_MARKETING_CLOUD_ID',
customTrackingServer: 'YOUR_CUSTOM_TRACKING_SERVER',
trackingServer: 'YOUR_TRACKING_SERVER',
jobId: 'YOUR_JOB_ID',
account: 'YOUR_ACCOUNT_ID',
publisherId: 'YOUR_PUBLISHER_ID',
version: '1.5'
customMetadata: {
video: {
yourLabel: 'YOUR_VALUE',
anotherLabel: 'YOUR_VALUE',
//...
},
chapter: {
// for sending metadata with chapterMetadata - applies to the chapter tracking usecase
},
ad: {
// for sending metadata with adMetadata
}
}
}
}
Heartbeat integrations relying on page level metadata not available to the SDK can use the config parameter customMetadata
to provide metadata mapping as shown in the sample code. The plugin macros listed at the beginning of this section can be used to populate the custom metadata values.
{
derivedMetadata: {
yourKey: 'YOUR_VALUE',
},
plugins: {
heartbeat: {
marketingCloudId: 'YOUR_MARKETING_CLOUD_ID',
customTrackingServer: 'YOUR_CUSTOM_TRACKING_SERVER',
trackingServer: 'YOUR_TRACKING_SERVER',
jobId: 'YOUR_JOB_ID',
account: 'YOUR_ACCOUNT_ID',
publisherId: 'YOUR_PUBLISHER_ID',
version: '1.5',
useDerivedMetadata: true,
mapping: {
video: {
enabled: true,
playerName: 'YOUR_PLAYER_NAME',
id: 'YOUR_VIDEO_ID',
name: 'YOUR_VIDEO_NAME',
streamType: 'YOUR_VIDEO_STREAM_TYPE',
context: {
yourLabel: 'yourKey',
anotherLabel: 'ANOTHER_VALUE'
}
},
chapter: {
// for sending metadata with chapterMetadata - applies to the chapter tracking usecase
},
ad: {
// for sending metadata with adMetadata
}
}
}
},
//...
}
Alternatively, the Heartbeat plugin configuration may use derived metadata to populate the custom metadata values. In this case, provide the useDerivedMetadata
flag and the mapping
section. The mapping
section includes mandatory Heartbeat fields on the top level, and custom metadata within the context
object. The enabled
flag is used to enable derived metadata within the mapping
section. Whenever a value in the mapping
section matches a key in the derived metadata, the value is replaced with the corresponding derived metadata value. In the second example to the right, the custom yourLabel
field will be sent with the value 'YOUR_VALUE' since 'yourKey' is a key in the derived metadata. The custom 'anotherLabel' field will be sent with the value 'ANOTHER_VALUE' since 'ANOTHER_VALUE' is not a key in the derived metadata.
Comscore Parameters
plugins: {
comscore: {
clientId: 'YOUR CLIENT ID',
script: '//w3.cdn.anvato.net/player/prod/v3/plugins/comscore/comscoreplugin.min.js'
}
}
Plugin Name | Parameters | Definition |
---|---|---|
comscore | clientId | Client ID provided by comscore |
script | URL for the Comscore plugin script |
At a minimum, you may provide only the clientId. If you would like to provide specific Comscore parameter values or use derived metadata, then you can set useDerivedMetadata
to true
and provide a mapping
section. The mapping
section maps Comscore parameter names to the values that should be sent. You can provide the actual values, derived metadata key names, or macros.
If you require a specific version of the Comscore SDK or require custom tracking behavior, you may implement an external Comscore plugin for the Anvato web player. See the External Plugins section for more information.
plugins: {
comscore: {
clientId: 'YOUR CLIENT ID',
script: '//w3.cdn.anvato.net/player/prod/v3/plugins/comscore/comscoreplugin.min.js',
useDerivedMetadata: true,
mapping: {
c3: '*null',
c4: '*null',
c6: '*null',
ns_st_cl: '{{COMSCORE_CLIP_LENGTH}}',
ns_st_pr: '{{TITLE}}',
ns_st_ep: '{{EPISODE}}',
ns_st_ge: 'YOUR ns_st_ge VALUE',
ns_st_st: 'SOME_DERIVED_METADATA_KEY_NAME'
}
}
}
Nielsen Parameters
plugins: {
nielsen: {
environment: 'production',
sfcode : 'YOUR_SFCODE',
apid : 'YOUR_APP_ID',
apn: 'YOUR_APP_NAME',
type: 'dtvr',
optOut: {location: 'TL', sizeFactor:.3, margin: '20px', period: -1}
}
}
Plugin Name | Parameters | Definition |
---|---|---|
nielsen | environment | Nielsen has 2 environments: cert and production (default) |
sfcode | provided by Nielsen | |
apid | app ID provided by Nielsen | |
apn | app name used optionaly for specifying the player | |
type | tracking type of Nielsen plugin: dtvr, dcr | |
optOut | Object specifying the location of the button displaying the opt-out notification and the period of making this button visible again after toggling on the notification (default is Infinity, and setting -1 will make it always show up) |
Offsite Plugin Configurations
{
...
plugins: {
dfp: {
clientSide: {
adTagUrl: 'YOUR AD TAG URL'
}
}
},
offsitePlugins: {
dfp: false
}
}
A plugin configuration provided to the offsitePlugins
parameter will override the plugins
configuration if the player is one of the following:
- An iframe embed instance from a share link.
- An iframe embed on an AMP page.
In combination with the IS_OFFSITE macro, the offsitePlugins
configuration enables you to change or toggle on/off plugin configurations depending on where the player is embedded.
Derived Metadata
Certain plugins that require video metadata may also take advantage of derived metadata. Derived metadata consists of key-value pairs that can be used as custom metadata for some plugins, such as Adobe Heartbeat.
// Setting derived metadata as a config parameter
AnvatoPlayer('p0').init({
//...
derivedMetadata: {
yourKey: 'YOUR_VALUE',
anotherKey: 'ANOTHER_VALUE',
//...
},
//...
});
// Setting derived metadata using the play() call
AnvatoPlayer('p0').play({
//...
derivedMetadata: {
yourKey: 'YOUR_VALUE',
anotherKey: 'ANOTHER_VALUE',
},
url: 'YOUR_VIDEO_URL',
format: 'YOUR_VIDEO_FORMAT',
});
// Setting derived metadata in a dynamic playlist
AnvatoPlayer('p1').init({
//...
playlist: [
{
derivedMetadata: {
yourKey: 'YOUR_VALUE',
anotherKey: 'ANOTHER_VALUE',
//...
},
url: 'YOUR_VIDEO_URL',
format: 'YOUR_VIDEO_FORMAT',
}
]
});
Derived metadata may also be set at the application level as an embed parameter, in the play() API call, or in each item of a dynamic playlist. Derived metadata provided during the play()
call or with a dynamic playlist item will take priority over derived metadata provided as an embed parameter.
External Plugins
While the plugins listed above are implemented and bundled within the player, it is possible to implement external plugins for the player. This can be achieved with the anvp.AnvatoCustomPluginInterface
.
There are three main steps to creating an external plugin:
- Define the name of the plugin
- Implement the
AnvatoCustomPluginInterface
methods - Register the plugin instance
See the sample code at the end of this section for an example.
For step 1, the name of the plugin is defined by calling the AnvatoCustomPluginInterface
as a function with the plugin name as an argument. This is the plugin name that will be used in the player configuration.
var AnvatoCustomPluginInterface = anvp.AnvatoCustomPluginInterface;
function DemoCustomPlugin() {
AnvatoCustomPluginInterface.call(this, 'customPluginDemo');
}
For step 2, the following methods should be implemented within your custom plugin class.
init
A method to initialize the plugin. In case the plugin needs to asynchronously fetch other scripts or data, you must call the completeCallback
function to notify the player that the plugin has finished initializing. By default, the loading of the plugin will timeout after 5 seconds if the callback function is not called by then. The 5 second value is configurable by setting the pluginsLoadingTimeout
player configuration parameter value to the desired number of seconds.
Param | Type | Description |
---|---|---|
completeCallback | Function |
A callback function that should be called once the plugin has been initialized |
config | Object |
The configuration for this plugin that was provided in the player configuration |
sendBeacon
A callback for player events. This will likely drive a lot of the plugin behavior. For instance, you may want to pause/resume an analytics tracking session when the event
value is USER_PAUSE
/USER_RESUME
.
Param | Type | Description |
---|---|---|
event | String |
The name of the player event |
context | Object |
Context object that keeps track of the playback state |
args | Array |
A list containing the event arguments as specified in API Events |
timestamp | String |
The elapsed time since the player loaded in the format mm:ss:SSS |
updateTime
A callback for playhead time updates.
Param | Type | Description |
---|---|---|
index | Number |
The current playhead time in seconds |
duration | Number |
The duration of the current media asset in seconds |
context | Object |
Context object that keeps track of the playback state |
onError
A callback for plugin errors. For example, this method will be invoked if the plugin initialization times out.
Param | Type | Description |
---|---|---|
errorMessage | String |
The error message |
destroy
A method to clean up resources when the player needs to destroy the plugin instance.
For step 3, use the AnvatoCustomPluginInterface.registerCustomPlugin
method to register your plugin instance.
AnvatoCustomPluginInterface.registerCustomPlugin(new DemoCustomPlugin());
The AnvatoCustomPluginInterface exposes the following services through AnvatoCustomPluginInterface.services
that can be helpful for generating dynamic content based on the current media asset:
getDerivedMetadata
Gets the portion of the player configuration object specified by the metadataPathPrefix
with its values replaced by derived metadata.
Param | Type | Description |
---|---|---|
metadataPathPrefix | String |
The path within the player configuration object to the mapping object that requires its values to be replaced by derived metadata. The path is delimited by colons (:) and must end with a trailing colon |
metadataLabel | String |
The desired derived metadata key. If not provided, then the entire object specified by the metadataPathPrefix will be returned with its values replaced by derived metadata |
fallbackValue | * |
The value to return if the derived metadata value cannot be resolved |
injectMacros
Replaces macro templates in the given data
with the values in the pluginMacros
mapping. Macros are surrounded by double curly braces. For instance, if the data
is {{TITLE}}
and the pluginMacros
is {TITLE: 'My video'}
, then the returned value will be 'My video'
.
Param | Type | Description |
---|---|---|
data | String or Object |
String containing a macro or an object whose values contain macros. The object may contain nested objects. Strings without macros remain unchanged |
pluginMacros | Object |
An object mapping from macro names to the macro replacement values |
The AnvatoCustomPluginInterface exposes a number of utility functions through AnvatoCustomPluginInterface.util
:
getURL
Converts the given URL into an absolute URL.
Param | Type | Description |
---|---|---|
rawURL | String |
The URL string |
Returns | Type |
---|---|
An object whose url property is the absolute URL and whose componentRoot property is the portion of the URL up until the file name |
Object |
loadJS
Loads the given script.
Param | Type | Description |
---|---|---|
url | String |
The script URL |
elementName | String |
The DOM element tag name where the script should be appended, e.g. body |
callback | Function |
The callback function that is called after the script loads |
error | Function |
The callback function that is called if the script fails to load |
getDeviceInfo
Gets the user's browser and device information based on the userAgent string.
Returns | Type |
---|---|
An object containing browser/device information based on the userAgent string | Object |
getConnectionType
Gets the user's network/connection information based on navigator.connection
.
Returns | Type |
---|---|
The user's network/connection information based on navigator.connection |
Object |
startTimeout
Starts a timeout.
Param | Type | Description |
---|---|---|
timers | Object |
The object mapping timeout ids to timeout references |
timerId | String |
The id for the timeout |
duration | Number |
The timeout duration in milliseconds |
callback | Function |
The callback function that is called when the timeout has expired |
timeoutExists
Determines whether the timeout exists.
Param | Type | Description |
---|---|---|
timerId | String |
The id for the timeout |
Returns | Type |
---|---|
True if the timeout exists, false otherwise | Boolean |
cancelTimeout
Cancels the timeout with the given id.
Param | Type | Description |
---|---|---|
timers | Object |
The object mapping timeout ids to timeout references |
timerId | String |
The id for the timeout |
cancelAllTimeouts
Cancels all timeouts.
Param | Type | Description |
---|---|---|
timers | Object |
The object mapping timeout ids to timeout references |
deepCopy
Creates a deep copy of the given object.
Param | Type | Description |
---|---|---|
obj | Object |
The object to copy |
Returns | Type |
---|---|
A deep copy of the given object | Object |
The AnvatoCustomPluginInterface exposes the following DOM elements through AnvatoCustomPluginInterface.nodeInfo
:
Name | Description |
---|---|
videoNode | The video element for the main content and server side ads |
adNode | The div element that acts as the container for client-side ad videos |
videoContainerNode | The div element that acts as the container for the main video element |
// Sample custom plugin implementation
(function(anvp) {
var AnvatoCustomPluginInterface = anvp.AnvatoCustomPluginInterface;
var services = AnvatoCustomPluginInterface.services;
var util = AnvatoCustomPluginInterface.util;
var nodeInfo = AnvatoCustomPluginInterface.nodeInfo;
function DemoCustomPlugin() {
// Step 1: Define the custom plugin name
AnvatoCustomPluginInterface.call(this, 'customPluginDemo');
}
DemoCustomPlugin.prototype =
Object.create(AnvatoCustomPluginInterface.prototype);
// Step 2: Implement the interface functions
DemoCustomPlugin.prototype.init = function(completeCallback, config) {
console.log('[DemoCustomPlugin] init with config:', config);
// This timeout simulates an asynchronous operation such as loading a library
// or fetching data from a CDN.
window.setTimeout(function() {
// The loading of the plugin will timeout after 5 seconds if it is not ready
// by then.
completeCallback();
}, 1000);
};
DemoCustomPlugin.prototype.sendBeacon = function(
event, context, args, timeStamp) {
console.log('[DemoCustomPlugin] sendBeacon:', event);
console.log('[DemoCustomPlugin] context:', context);
};
DemoCustomPlugin.prototype.updateTime = function(index, duration, context) {
console.log('[DemoCustomPlugin] updateTime:', index);
};
DemoCustomPlugin.prototype.onError = function(errorMessage) {
console.log('[DemoCustomPlugin] onError:', errorMessage);
};
DemoCustomPlugin.prototype.destroy = function() {
// Clean up
};
// Step 3: Register the custom plugin instance
AnvatoCustomPluginInterface.registerCustomPlugin(new DemoCustomPlugin());
})(window.anvp);
In order to use the external plugin that you have created, include the plugin configuration plugins
section of the player configuration object using the name defined in step one. Within the plugin configuration object, include the script
URL to the file containing your plugin implementation as a parameter.
// To include the custom plugin in the player configuration:
AnvatoPlayer('p0').init({
...,
plugins: {
customPluginDemo: {
script: './customplugindemo.js',
...,
},
},
});
Customization
Player SDK allows customization by disabling the default UI components and providing a view, stylesheet and controller script.
Customization involves the following steps:
- Enabling the customization via init configuration
- Preparing the custom UI view
- Implementing the controller
- Styling the view
Customization config
customUIController
embed parameter must be populated as shown in the sample code pane.
- The default UI components for which we are going to provide implementation must be turned off under
showUIComponents
- View must be provided as a partial html under
loadAssets
. - Controller script must be provided with type script under
loadAssets
. - Stylesheet must be provided with type stylesheet under
loadAssets
Init Configuration with Customization
AnvatoPlayer('custom').init({
url: "https://mcp-download.storage.googleapis.com/anv-videos/variant/3697661.m3u8",
width: "100%",
poster: "https://mcp-media.storage.googleapis.com/anv-pvw/B98/C0D/B98C0DBDD0404D56AD70119379477993_6.jpg",
title: "Caminandes 2",
description: "Gran Dillama - Blender Foundation",
customUIController: {
showUIComponents: {
control: false,
splash: false,
captionSetting: false,
share: false,
recommendation: false
},
loadAssets: [
{
type: "stylesheet",
url: "sample-ui/view.css"
},
{
type: "script",
url: "sample-ui/controller.js"
},
{
type: "view",
url: "sample-ui/view.html"
}
]
}
});
Preparing the view
The view is a partial HTML that is injected to the player SDK during runtime. The view shall include one parent element <anvato-controller>
. The view content must be written inside this custom element as shown in the sample.
View for the Custom UI
<anvato-controller class="custom-ui">
<div class="splash">
<div class="title"></div>
<div class="description"></div>
<div class="play clickable"></div>
</div>
<div class="control">
<div class="timeline">
<div class="progress"></div>
</div>
<div class="play-pause button left"></div>
<div class="time left" >
<div class="vod">
<span class="text current-time"></span>
<span class="text">/</span>
<span class="text total-duration"></span>
</div>
<div class="live">
<span class="text">Live</span>
</div>
</div>
<div class="fullscreen button right"></div>
</div>
<div class="spinner"></div>
<div class="recommendation">
<div class="up-next">
<div class="content">
<div class="title"></div>
<div class="count-down"></div>
<div class="play clickable"></div>
<div class="cancel clickable">Cancel</div>
</div>
</div>
<div class="grid">
<div class="rows"></div>
</div>
</div>
</anvato-controller>
Implementing the controller
In order to implement the controller, we will be implementing the interfaces provided by the player SDK. These interfaces are available from internal anvp
namespace which becomes available during the run time. This namespace shall not be confused with the public anvp
namespace which was used for entering the player config and accessing API methods in the earlier versions of the player.
AnvatoCustomUIInterface
This interface provides access to:
- the custom UI container using
container
property - mediator instance using
mediator
property - static data using
staticData
needed for environment specific values and preset values such as caption properties
The implementation of this interface must provide readyCallback and finally UI sub-components must be registered using their respective variables:
- control,
- splash,
- captionSetting,
- share,
- recommendation
In case you are not planning to provide all of these components, you are supposed to either provide an empty implementation for the provided sub-component interfaces or simply set related sub-component's showUIComponents
value to true as shown above.
Subcomponent Interfaces
- ControlInterface
- SplashInterface
- CaptionSettingInterface
- ShareInterface
- RecommendationInterface
These interfaces only include a not implemented
warning mimicking pure virtual functions. The player SDK calls a comprehensive list of API methods implemented on these sub-component interfaces. However, not all of them are needed for customizing the player SDK. So you shall implement these methods based on your use case. 'not implemented' warning can be suppressed by setting the var notImplementedWarning_
to false. A comprehensive list of these methods are provided in the sub-components reference.
These methods are the handles the player SDK uses to ask for an action, set some value or get information about the component. This covers the communication from the player SDK to the UI components.
When it comes to the communication from UI component to the player SDK, mediator instance provided by AnvatoCustomUIInterface is used. Mediator instance provides publish method for sending the topics with related payload. Comprehensive list of mediator topics is given in mediator topics.
The implementation for anvp.AnvatoCustomUIInterface
function CustomUI() {
anvp.AnvatoCustomUIInterface.call(this);
function init_() {
parentElement = anvp.AnvatoCustomUIInterface.container;
mediator = anvp.AnvatoCustomUIInterface.mediator;
captionProps = anvp.AnvatoCustomUIInterface.staticData.captionProps;
fullscreenSupport = anvp.AnvatoCustomUIInterface.staticData.fullscreenSupport;
}
this.readyCallback = function() {
init_();
parentElement.style.display = 'block';
};
this.control = ControlBar;
this.splash = Splash;
this.recommendation = Recommendation;
}
new CustomUI();
As you can see in the sample code for the implementation of AnvatoCustomUIInterface
, control, splash, and recommendation variables are populated with the implementation of anvp.ControlInterface
, anvp.SplashInterface
, and anvp.RecommendationInterface
.
A sample implementation for these sub-components is given in the sample code pane.
The implementation for anvp.ControlInterface
function ControlBar() {
anvp.ControlInterface.call(this);
this.timers_ = {};
this.notImplementedWarning_ = true;
this.setResponsive_ = function() {
getElementFromClassPath('control').setAttribute('data-state', 'responsive');
}
}
ControlBar.prototype = Object.create(anvp.ControlInterface.prototype);
ControlBar.prototype.init = function(node, w, h) {
getElementFromClassPath('control:play-pause').onclick = function() {
mediator.publish('playPauseClicked');
};
getElementFromClassPath('control:fullscreen').onclick = function() {
mediator.publish('fullscreenClicked');
};
getElementFromClassPath('control:timeline').onclick = function(e) {
var result = getSeekIndex(e, this);
mediator.publish('seekRequest', result.seekIndex, undefined, 'Control');
};
};
ControlBar.prototype.updateDuration = function(index) {
currentTime = index;
getElementFromClassPath('control:timeline:progress').style.width =
(currentTime * 100 / totalDuration) + '%';
getElementFromClassPath('control:current-time').innerHTML =
sec2TimeString(Math.round(currentTime));
if (currentTime) {
show(getElementFromClassPath('control:time'));
}
};
ControlBar.prototype.setDuration = function(duration) {
currentTime = 0;
totalDuration = duration;
hide(getElementFromClassPath('control:time'));
getElementFromClassPath('control:total-duration').innerHTML =
sec2TimeString(Math.round(totalDuration));
};
ControlBar.prototype.setVisibilityMode = function(mode) {
getElementFromClassPath('control').setAttribute('data-state', mode);
};
ControlBar.prototype.showTemporarily = function() {
getElementFromClassPath('control').setAttribute('data-state', 'visible');
if (this.timers_.setResponsive) {
clearTimeout(this.timers_.setResponsive);
delete this.timers_.setResponsive;
}
this.timers_.setResponsive = setTimeout(this.setResponsive_, 3000);
};
ControlBar.prototype.setPaused = function(flag) {
getElementFromClassPath('control:play-pause')
.setAttribute('data-state', flag ? 'paused' : 'playing');
if (flag) {
setTimeout(this.setVisibilityMode.bind(this, 'visible'), 100);
if (this.timers_.setResponsive) {
clearTimeout(this.timers_.setResponsive);
delete this.timers_.setResponsive;
}
}
};
ControlBar.prototype.setFullscreen = function(flag) {
getElementFromClassPath('control:fullscreen')
.setAttribute('data-state', flag ? 'on' : 'off');
};
ControlBar.prototype.setLive = function(flag) {
var fn = flag ? hide : show;
fn(getElementFromClassPath('control:timeline'));
getElementFromClassPath('control:time')
.setAttribute('data-state', flag ? 'live' : 'vod');
};
ControlBar.prototype.destroy = function() {
for (var t in this.timers_) {
if (this.timers_.hasOwnProperty(t)) {
clearTimeout(this.timers_[t]);
delete this.timers_[t];
}
}
};
The implementation for anvp.SplashInterface
function Splash() {
anvp.SplashInterface.call(this);
this.notImplementedWarning_ = true;
}
Splash.prototype = Object.create(anvp.SplashInterface.prototype);
Splash.prototype.init = function() {
getElementFromClassPath('splash:play').onclick = function() {
mediator.publish('playRequest', true);
};
};
Splash.prototype.show = function(splashMode, playerMode, img, remaining) {
var splash = getElementFromClassPath('splash');
splash.setAttribute('data-mode', splashMode);
show(splash);
mediator.publish('splashModeUpdated', splashMode);
if (img) {
cacheImages([img], function() {
getElementFromClassPath('splash').style.background =
'url(' + img + ') center center / 100% no-repeat';
});
} else {
getElementFromClassPath('splash').style.background = 'none';
}
};
Splash.prototype.setInfo = function(title, description) {
getElementFromClassPath('splash:title').innerHTML = title;
getElementFromClassPath('splash:description').innerHTML = description;
};
Splash.prototype.hide = function() {
hide(getElementFromClassPath('splash'));
};
Splash.prototype.buffering = function(on) {
getElementFromClassPath('custom-ui')
.setAttribute('data-buffering', on ? 'on' : 'off');
};
The implementation for anvp.RecommendationInterface
function Recommendation() {
anvp.RecommendationInterface.call(this);
this.notImplementedWarning_ = true;
}
Recommendation.prototype =
Object.create(anvp.RecommendationInterface.prototype);
Recommendation.prototype.init = function() {
// populate HTML for recommendation frames
generateGrid();
// attach onclick event handlers
for (var frameId = 0; frameId < recomFrameCount; frameId++) {
var frame = getElementFromClassPath('recommendation:frame' + frameId);
frame.onclick = onFrameClick(frameId);
}
getElementFromClassPath('recommendation:cancel').onclick = function() {
clearTimers(recomTimers);
hide(getElementFromClassPath('recommendation:up-next'));
show(getElementFromClassPath('recommendation:grid'));
};
getElementFromClassPath('recommendation:play').onclick = function() {
clearTimers(recomTimers);
selectNextVideo(0);
};
getElementFromClassPath('recommendation:replay').onclick = function() {
clearTimers(recomTimers);
mediator.publish('playRequest', true);
hideRecommendations();
};
};
Recommendation.prototype.setRecommendations = function(vList, countDownTime) {
recomVideoList = vList || [];
recomVideoImgURLs = {};
recomImgCacheCount = 0;
recomCountDownSeconds =
(typeof countDownTime != 'undefined' ? countDownTime :
recomCountDownSeconds);
if (!recomVideoList.length) {
return false;
}
var urlList = [];
// set the frame video metadata and hide unused frames
for (var idx = 0; idx < recomFrameCount; idx++) {
var framePath = 'recommendation:frame' + idx;
var frame = getElementFromClassPath(framePath);
if (idx < recomVideoList.length) {
var video = recomVideoList[idx];
setInnerHTML(getElementFromClassPath(framePath + ':name'), video.title);
setInnerHTML(
getElementFromClassPath(framePath + ':duration'),
sec2TimeString(video.duration));
// keep list of frame indexes for each url in case multiple frames use
// the same image url
var idxList = recomVideoImgURLs[video.image];
if (idxList) {
idxList.push(idx);
} else {
recomVideoImgURLs[video.image] = [idx];
urlList.push(video.image);
recomImgCacheCount++;
}
show(frame);
} else {
hide(frame);
}
}
mediator.publish('loadingRecommendations');
// load all of the thumbnails images for the recommendations
cacheImages(urlList, function(img) {
recomImgCacheCount--;
if (!img.src) return;
var idxList = recomVideoImgURLs[img.src];
for (var i = 0; i < idxList.length; i++) {
var thumbnailPath = 'recommendation:frame' + idxList[i] + ':thumbnail';
getElementFromClassPath(thumbnailPath).src = img.src;
if (idxList[i] === 0) {
getElementFromClassPath('recommendation:up-next')
.style.backgroundImage = 'url(' + img.src + ')';
}
}
// check if all thumbnail images have been loaded
if (recomImgCacheCount === 0) {
mediator.publish('recommendationsReady');
}
});
return true;
};
Recommendation.prototype.show = function(title) {
if (!recomVideoList.length) return;
var video = recomVideoList[0];
getElementFromClassPath('recommendation:title').innerHTML =
'Up Next: ' + (video.title || '');
show(getElementFromClassPath('recommendation:up-next'));
hide(getElementFromClassPath('recommendation:grid'));
show(getElementFromClassPath('recommendation'));
countDown(recomCountDownSeconds);
};
Customized Player
The player below demonstrates the customization achieved using the steps above. The files for this customization are available here.
Mediator topics
Mediator topics are published using the publish
method of the mediator
instance exposed from anvp.AnvatoCustomUIInterface
. These must be published together with the arguments explained below.
mediator.publish('MEDIATOR_EVENT', arguments...);
bitrateSelected
bitrateSelected topic
Arguments:
Name | Type | Description |
---|---|---|
bitrate | number | The selected bitrate |
captionLanguageSelected
captionLanguageSelected topic
Arguments:
Name | Type | Description |
---|---|---|
language | string | Selected caption language |
captionStyleUpdate
captionStyleUpdate topic
Arguments:
Name | Type | Description |
---|---|---|
style | object | Caption style object |
catchLive
catchLive topic
dispatchEvent
Event used for dispatching an SDK event for the page listener
Arguments:
Name | Type | Description |
---|---|---|
name | string | Event name |
args | array | Arguments array |
fullscreenClicked
fullscreenClicked topic
loadeddata
loadeddata topic
Arguments:
Name | Type | Description |
---|---|---|
readyState | number | HTML5 video ready state enum |
loadingRecommendations
loadingRecommendations topic
playPauseClicked
playPauseClicked topic
Arguments:
Name | Type | Description |
---|---|---|
isPauseInternal | boolean | Flag used for indicating non-user triggered events to prevent a user interaction SDK event |
playRequest
playRequest topic
Arguments:
Name | Type | Description |
---|---|---|
initial | boolean | The flag indicating if the play request is initial play request to include load first |
recommendationSelected
recommendationSelected topic
Arguments:
Name | Type | Description |
---|---|---|
video | object | An object containing metadata for the selected recommendation video. Must include either a video url and format ('m3u8', 'mp4', etc.) or an id for the current MCP. Should also include a title, description, poster image URL, and video duration in seconds |
isManual | boolean | indicates if recommendation item is selected manually or as a result of count down/auto advance |
recommendationsReady
recommendationsReady topic
seekRequest
seekRequest topic
Arguments:
Name | Type | Description |
---|---|---|
timeIndex | number | New time index for seeking |
reserved | undefined | Reserved argument that should be set to undefined |
origin | string | The component that published the seekRequest. Set this to 'Control' to ensure the player immediately updates its internal time index. |
splashModeUpdated
splashModeUpdated topic
Arguments:
Name | Type | Description |
---|---|---|
mode | string | Splash mode |
toggleCaptionSet
toggleCaptionSet topic
toggleSharePanel
toggleSharePanel topic
volumeUpdate
volumeUpdate topic
Arguments:
Name | Type | Description |
---|---|---|
volume | number | Audio level |
Sub-components reference
This section includes the API methods the UI sub-components interfaces provide:
Control
Decorates the control bar and hooks up the logic for the various control elements
Control API Methods
- .init(node, w, h)
- .rescale(w, fullscreen)
- .updateDuration(index)
- .updateLanguage()
- .setDuration(duration)
- .setVisibilityMode(mode)
- .showTemporarily()
- .hide()
- .setPaused(flag)
- .setFullscreen(flag)
- .setFullscreenButton(flag)
- .toggleCaptionSettingButton(flag)
- .setAvailableCaptionLanguages(languages, currentLanguage)
- .setAvailableBitrates(bitrates, currentBitrate, customLabelMapping, resolutionMapping)
- .setPlaylistReady(flag)
- .showRecallLabel(timeIndex)
- .hideRecallLabel()
- .setLive(flag)
- .setLiveCatch()
- .setAdMode(flag, counterAvailable)
- .setVolume(volume)
- .toggleVolume()
- .setDownload(url)
- .updateAdBreaks(indices, duration)
- .onBitrateChanged(bitrate)
- .onBitrateChangeInProgress(bitrate)
control.init(node, w, h)
Initializes the control instance
Param | Type | Description |
---|---|---|
node | HTMLElement |
Container node |
w | Number |
Width |
h | Number |
Height |
control.rescale(w, fullscreen)
Resizes the control node
Param | Type | Description |
---|---|---|
w | Number |
Width |
fullscreen | Boolean |
Fullscreen flag |
control.updateDuration(index)
Updates the current time and timeline bar width
Param | Type | Description |
---|---|---|
index | Number |
Time index |
Returns: Object
- Layout instance
control.updateLanguage()
Update all of the user-facing text for this module to use the current language
control.setDuration(duration)
Sets the duration of the content
Param | Type | Description |
---|---|---|
duration | Number |
Total duration |
control.setVisibilityMode(mode)
Changes the visibility behavior of the control bar. There are three modes in which the control bar can be: 'visible', 'hidden', 'responsive'. In visible mode, the control bar is always visible. In hidden mode, the control bar is never visible. In responsive mode, the control bar is temporarily visible in response to the mouse moving over the video.
Param | Type | Description |
---|---|---|
mode | String |
The visibility mode to use ('visible', 'hidden', or 'responsive') |
control.showTemporarily()
If visibilityMode is set to 'responsive', then this makes the control bar temporarily visible
control.hide()
Hides the control bar
control.setPaused(flag)
Sets the play/pause button to show the play or pause icon according to the given flag
Param | Type | Description |
---|---|---|
flag | Boolean |
If true, then the play/pause button will be set to show the play icon |
control.setFullscreen(flag)
Sets the fullscreen button to show the enlarge or shrink icon according to the given flag
Param | Type | Description |
---|---|---|
flag | Boolean |
If true, then the fullscreen button will be set to show the shrink icon |
control.setFullscreenButton(state)
Shows or hides the fullscreen button. Fullscreen must also be supported by the user's device in order to be shown
Param | Type | Description |
---|---|---|
flag | Boolean |
If true, then show the fullscreen button |
control.toggleCaptionSettingbutton(flag)
Shows the caption 'Settings' option when the flag is true, hides the option when the flag is false
Param | Type | Description |
---|---|---|
flag | Boolean |
If true, then the captions 'Settings' option will be shown. If false, then the option will be hidden |
control.setAvailableCaptionLanguages(languages, currentLanguage)
Updates the list of available caption languages that the user can choose from, and disables the entry for the language that is currently in use
Param | Type | Description |
---|---|---|
languages | Array.<String> |
The languages that captions are available for |
currentLanguage | String | null |
The caption language that is currently being used or null if captions are off |
control.setAvailableBitrates(bitrates, currentBitrate, customLabelMapping, resolutionMapping)
Sets the array of available bitrates in the stream, currently selected bitrate. Also provides mappings for customization.
Param | Type | Description |
---|---|---|
bitrates | Array.<Number> |
Available bitrates |
currentBitrate | Number |
Currently streaming/loaded bitrate |
customLabelMapping | Object |
Mapping from bitrates to custom labels |
resolutionMapping | Object |
Mapping from bitrates to resolution value (WIDTHxHEIGHT in pixels) |
control.setPlaylistReady(flag)
Indicates the playlist is ready or not to hide/display a playlist button
Param | Type | Description |
---|---|---|
flag | Boolean |
Flag for playlist readiness |
control.showRecallLabel(timeIndex)
Used for displaying the current time before a preview enabled seek is initiated
Param | Type | Description |
---|---|---|
timeIndex | Number |
Current time index before seek |
control.hideRecallLabel()
Used for hiding the current time after a preview enabled seek is initiated
control.setLive(flag)
Sets the live flag so that the control bar can adapt its view to live or vod mode
Param | Type | Description |
---|---|---|
flag | Boolean |
Live flag |
control.setLiveCatch()
Indicates live is caught and view can be updated for live sync
control.setAdMode(flag, counterAvailable)
Sets ad mode (ad or content) so that the control bar can update its view accordingly
Param | Type | Description |
---|---|---|
flag | Boolean |
Ad flag |
counterAvailable | Boolean |
Flag for indicating another UI element will be displaying a countdown |
control.setVolume(volume)
Sets the audio volume
Param | Type | Description |
---|---|---|
volume | Number |
The volume level to use from 0.0 to 1.0 |
control.toggleVolume()
Toggles the volume on and off. When toggled back on, the volume returns to the value it was at before being toggled off
control.setDownload(url)
Indicates that the video is downloadable and a button needs to be displayed
Param | Type | Description |
---|---|---|
url | String |
Downloadable video URL |
control.updateAdBreaks(indices, duration)
Updates the ad breaks so that the view can be updated
Param | Type | Description |
---|---|---|
indices | Array.<Number> |
Ad marker positions (in seconds) |
duration | Number |
Content duration excluding the ad durations |
control.onBitrateChanged(bitrate)
Indicates the bitrate has been changed
Param | Type | Description |
---|---|---|
bitrate | Number |
New bitrate value |
control.onBitrateChangeInProgress(bitrate)
Indicates that a bitrate change is in progress
Param | type | Description |
---|---|---|
bitrate | Number |
Prospective bitrate value |
Splash
Displays a splash image, play button, item title, and item description
Splash API Methods
- .init()
- .getCurrentMode() ⇒
string
- .getCurrentPoster() ⇒
String
- .show(splashMode, playerMode, img, [remaining])
- .setInfo(title, description)
- .setChromecastInfo(status, chromecastName)
- .resetInfo()
- .hide()
- .buffering(on)
- .rescale(w, fullscreen)
splash.init()
Initializes the splash object
splash.getCurrentMode() ⇒ string
Gets the current splash mode
Returns: string
- selectedModeKey
splash.getCurrentPoster() ⇒ String
Gets current poster image
Returns: String
- currentPosterURL
splash.show(splashMode, playerMode, img, [remaining])
Displays the splash (sync. or async.)
Param | Type | Description |
---|---|---|
splashMode | String |
Splash mode |
playerMode | String |
Splash mode |
img | String |
Image URL (enforces async when provided) |
[remaining] | Number |
Remaining time in seconds |
splash.setInfo(title, description)
Sets the title and description information and makes info holder visible
Param | Type | Description |
---|---|---|
title | String |
Item title |
description | String |
Item description |
splash.setChromecastInfo(status, chromecastName)
Notifies about the chromecast state and related metadata
Param | Type |
---|---|
status | string |
chromecastName | string |
splash.resetInfo()
Resets the title and description information and makes info holder invisible
splash.hide()
Hides the splash object
splash.buffering(on)
Displays or hides the progress circle
Param | Type | Description |
---|---|---|
on | Boolean |
A flag indicating whether to show the progress circle |
splash.rescale(w, fullscreen)
Rescales the splash
Param | Type | Description |
---|---|---|
w | Number |
Width |
fullscreen | Boolean |
Fullscreen flag |
Recommendation
Provides a UI for the user at the end of a playlist that displays a grid of recommended videos
Recommendation API Methods
- .init()
- .setRecommendations(vList, countDownTime)
- .show(title)
- .hide()
- .rescale()
- .addToPlaybackHistory(id)
recommendation.init()
Initializes the recommendation instance
recommendation.setRecommendations(vList, countDownTime)
Sets the list of recommended videos to be displayed
Param | Type | Description |
---|---|---|
vList | Object |
A list of video objects. Each object must include either a video url and format ('m3u8', 'mp4', etc.) or an id for the current MCP. Should also include a title, description, poster image URL, and video duration in seconds |
countDownTime | Number |
The time in seconds to countdown before autoplaying the first recommendation |
Returns: Boolean
- True if there are recommendations to display, false otherwise
recommendation.show(title)
Displays the recommendations
Param | Type | Description |
---|---|---|
title | String |
The title to display above the grid of recommendations |
recommendation.hide()
Hides the recommendations
recommendation.rescale(width)
Resizes the recommendation UI components
Param | Type | Description |
---|---|---|
width | Number |
Width of the player in pixels |
recommendation.addToPlaybackHistory(id)
Records that the video with the given id is being played. Used mainly to hide recommended videos that the user has already watched.
Param | Type | Description |
---|---|---|
id | String |
Id of the video being played |
Data Adaptors
Data adaptors are used for fetching a specific media content platform's media metadata and converting that into Anvato Web Player SDK's media information that is used as an initialization configuration or a playlist item.
While this documentation explains using only TKX Data Adaptor, it is possible to implement a similar adaptor for various other media platforms.
TKX Adaptor
TKX adaptor accepts the TKX specific parameters in an init configuration and converts them into the standard media information the player SDK consumes such as url
, title
, description
, poster
and other metadata.
Parameter | Type | Definition |
---|---|---|
video | String | Video ID provided by MCP |
accessKey | String | Enables the remote config and TVE services such as metadata lookup, schedule, geo station check and parental control. |
token | String | Provides access to the video. This token can be generated using the token generation algorithm or obtained from MCP embed code |
Integrating the TKX Adaptor
Using the player SDK with the TKX adaptor involves the following steps:
- Add the TKX Adaptor script
<script src='//w3.cdn.anvato.net/player/prod/v3/scripts/tkxadaptor.min.js'></script>
- Add the usual web player SDK script
<script src='//w3.cdn.anvato.net/player/prod/v3/scripts/anvload.js'></script>
- Instantiate TKX Adaptor
var tkxAdaptor = new TkxAdaptor({debug: false});
- Pass the init configuration and a callback to the
getMediaInfo
method of tkx adaptor instancetkxAdaptor.getMediaInfo({ accessKey: "X8POa4zPPaKVZHqmWjuEzfP31b1QM9VN", video: "3697661", token: "1xj4kk7xz_fVPtiSr68S5eBfhNOjAZOfDKqURVp7-Kc~MX4wfg" }, onMediaInfo);
- Init the web player SDK as usual using the converted configuration inside the callback method
function onMediaInfo(initConfig){ AnvatoPlayer('p0').init(initConfig); }
Using the Live Event Metadata Service
Live event metadata workflow involves the following steps after instantiating the TkxAdaptor instance and initializing the player SDK with the generated init config:
- Create a live video context
This context is used for storing the primary, secondary event IDs, relevant metadata and timestamp at which event ID is received. Secondary event ID (upid) is commonly used for events that are run out of schedule such as content replacememt or dynamic content etc.
const context = tkxAdaptor.createContext();
- Listening to the
rawId3
player SDK event and processing the payloadTKX Adaptor provides the API method
processCue
which decodes and parses the base64 encoded ID3 frame payload received fromrawId3
event, and evaluates if an event id change has occurred.AnvatoPlayer('p0').on('rawId3', function (data) { tkxAdaptor.processCue(context, data); });
- Implement
onProgramChanged
callback on the context This callback is called with eventId or upid. The API methodgetEventMetadata
must be called with eventID, upid, success and error callbacks to fetch the live event metadata using the TKX adaptor.context.onProgramChanged = function (eventId, upid) { tkxAdaptor.getEventMetadata( config.accessKey, eventId, upid, onEventMetadata, onEventMetadataError); }
- Pass the metadata to the player SDK
The metadata payload passed to the event metadata success callback includes primary metadata title and description together with more comprehensive metadata commonly used for analytics plugins.
updateMetadata
API method available on the player instance is called with event ID, primary metadata object and comprehensive metadata object populated as below:function onEventMetadata(payload) { const primaryMetadata = { title: payload.event.def_title, description: payload.event.def_description, }; const comprehensiveMetadata = payload.event; AnvatoPlayer('p0').updateMetadata(payload.eventid, null, primaryMetadata, comprehensiveMetadata); } function onEventMetadataError(error) { console.error('@onEventMetadataError', error); }
Use Cases
Anvato Video Player Plugin for WordPress
Introduction
Anvato WordPress plugin enables Anvato Media Content Platform (MCP) customers to embed a video player into their posts with a single click.
Installation
To get the Anvato WordPress plugin working with your WordPress account, please follow the steps below:
Step 1
Download the plugin folder here.
Step 2a
Go to your WordPress admin panel. Click on Plugin > Add New. Then click on the Upload Tab.
Upload the zip file that you downloaded from step 1 in the plugins folder of your WordPress install.
You will be taken to the activate a plugin page. Please make sure that you click on Activate the plugin link on the page. This step completes your installation.
Step 2b
If you like to use installation via FTP, please follow these steps. Access your host through the FTP manager. Access the path /wp-content/plugins/
and upload files there.
Once you have uploaded, then you would need to click on the Plugins tag in your WordPress admin panel. You will see the plugin you just uploaded. Click on the Activate button and you are done.
Step 3
Get the below configuration parameters from your Anvato support contact
- MCP URL
- MCP ID
- Station ID
- Public Key
- Private Key
Step 4
Set default video player size & autoplay state
- Player URL
- width
- height
Step 5 (Optional)
Set tracking parameters for analytics, leave it empty if you use default
- Tracker ID
- Profile
- Account
- Tracking Server
Step 6
Set monetization parameters if you want to display preroll and midroll ads.
If you are using DFP Ad server, please use the below parameter to insert your VAST Tag.
- DFP Premium Ad Tag
Usage (by Web Editor)
While editing a WordPress post, click the “Add Media“ tool, and choose “Insert Anvato Video” from left hand side bar.
Most recent videos in Anvato Media Content Platform are displayed in a pop-up overlay. You can narrow down the search by entering titles, descriptions or keywords.
Select the videos you wish to insert into your posts, and click “insert into Post” button. You are done.
Please note that when you select more than 1 video, you will create a playlist on a single player.
How it Works
On the background, we have inserted a WordPress short code into your post. This shortcode will display a video player when your users visit this page.
Advanced Settings
Parameters and Shortcodes
// Creates a player
[anvplayer video="282411"]
// Creates a player of 300×125 pixels that auto plays video id 282411.
[anvplayer video="282411" width=”300” height=”125” autoplay=”true” ]
When you use Anvato WordPress Plugin, you can customize your player using shortcode attribute at page level. You can add the following attributes to your shortcode
- video [Video ID]
- width [in px]
- height [in px]
- autoplay [true if autoplay is requested]
Facebook Instant Articles
Facebook Instant Articles are supported by the Web Player SDK. In order to embed a video in a Facebook Instant Article, please follow the steps below:
1. Prepare your player configuration:
Prepare your video configuration in a JSON format.
// Sample player configuration
{
"url":"https://mcp-download.storage.googleapis.com/anv-videos/variant/3697036.m3u8",
"poster":"https://mcp-media.storage.googleapis.com/anv-iupl/5FA/ACA/5FAACA8FB2F3459C81F2CEF515615DAF",
"title":"Sintel",
"description":"Third Open Movie by Blender Foundation"
}
2. Remove new lines and extra spaces from your player configuration and encode your player configuration using base64 encoding:
// Base64 encoded player configuration
"eyJ1cmwiOiJodHRwOi8vbWNwLWRvd25sb2FkLnMzLmFtYXpvbmF3cy5jb20vYW52LXZpZGVvcy92YXJ
pYW50LzM2OTcwMzYubTN1OCIsInBvc3RlciI6Imh0dHA6Ly9tY3AtbWVkaWEuczMuYW1hem9uYXdzLmN
vbS9hbnYtaXVwbC81RkEvQUNBLzVGQUFDQThGQjJGMzQ1OUM4MUYyQ0VGNTE1NjE1REFGIiwidGl0bGU
iOiJTaW50ZWwiLCJkZXNjcmlwdGlvbiI6IlRoaXJkIE9wZW4gTW92aWUgYnkgQmxlbmRlciBGb3VuZGF
0aW9uIn0="
Note: Make sure that it is a valid formatted JSON string.
3. Use our Facebook Instant Articles loader (anvloadfbia.html) to prepare the URL for the embedded iframe by using your base64 encoded player configuration to fill in the anvkey url parameter:
Template URL: https://w3.cdn.anvato.net/player/prod/v3/anvloadfbia.html?anvkey=[BASE64_ENCODED_CONFIGURATION]
// Example:
"https://w3.cdn.anvato.net/player/prod/v3/anvloadfbia.html?anvkey=eyJ1cmwiOiJodHRwOi8vbWNwLWRvd25sb2FkLnMzLmFtYXpvbmF3cy5jb20vYW52LXZpZGVvcy92YXJpYW50LzM2OTcwMzYubTN1OCIsInBvc3RlciI6Imh0dHA6Ly9tY3AtbWVkaWEuczMuYW1hem9uYXdzLmNvbS9hbnYtaXVwbC81RkEvQUNBLzVGQUFDQThGQjJGMzQ1OUM4MUYyQ0VGNTE1NjE1REFGIiwidGl0bGUiOiJTaW50ZWwiLCJkZXNjcmlwdGlvbiI6IlRoaXJkIE9wZW4gTW92aWUgYnkgQmxlbmRlciBGb3VuZGF0aW9uIn0="
Note: You can test this url by opening the URL on your browser. Given that the iFrame is hosted in a secure URL, make sure that your CDN supports secure connections (https cert) to avoid mixed content or certification errors.
4. Use the following template to create the Facebook Instant Article embedded video using the prepared URL from the previous step:
<!-- Template: -->
<figure class="op-interactive">
<iframe src="[ANVLOADFBIA_PREPARED_URL]"
width="640" height="360" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" allowfullscreen
layout="responsive" scrolling="no" frameborder="0"></iframe>
</figure>
<!-- Example: -->
<figure class="op-interactive">
<iframe src="https://w3.cdn.anvato.net/player/prod/v3/anvloadfbia.html?anvkey=eyJ1cmwiOiJodHRwOi8vbWNwLWRvd25sb2FkLnMzLmFtYXpvbmF3cy5jb20vYW52LXZpZGVvcy92YXJpYW50LzM2OTcwMzYubTN1OCIsInBvc3RlciI6Imh0dHA6Ly9tY3AtbWVkaWEuczMuYW1hem9uYXdzLmNvbS9hbnYtaXVwbC81RkEvQUNBLzVGQUFDQThGQjJGMzQ1OUM4MUYyQ0VGNTE1NjE1REFGIiwidGl0bGUiOiJTaW50ZWwiLCJkZXNjcmlwdGlvbiI6IlRoaXJkIE9wZW4gTW92aWUgYnkgQmxlbmRlciBGb3VuZGF0aW9uIn0="
width="640" height="360" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" allowfullscreen
layout="responsive" scrolling="no" frameborder="0"></iframe>
</figure>
5. The tag is now ready to be embedded in a Facebook Instant Article. For more information regarding third party embeds please refer to FBIA documentation.
Pausing the Player in Inactive Tabs
// Adapted from the code example on the Mozilla Developer Network documentation
// for the Page Visibility API (https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)
// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
hidden = 'hidden';
visibilityChange = 'visibilitychange';
} else if (typeof document.msHidden !== 'undefined') {
hidden = 'msHidden';
visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
hidden = 'webkitHidden';
visibilityChange = 'webkitvisibilitychange';
}
// If the page is hidden, pause the video;
// if the page is shown, play the video
function handleVisibilityChange() {
if (document[hidden]) {
AnvatoPlayer('p0').pause();
} else {
AnvatoPlayer('p0').play();
}
}
AnvatoPlayer('p0').on('ready', function(playerInstance) {
// ...
// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === 'undefined' || hidden === undefined) {
console.log('This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.');
} else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
});
In some cases, you may want to pause video content when the user switches tabs or pause audio content on mobile when returning to the home screen. This can be accomplished using the Page Visibility API.
See the sample code for a basic implementation of pausing when the tab is inactive and playing when the user returns to the tab. Note that this example applies to both desktop and mobile. You may need to detect the user's device or browser first in order to apply this behavior for particular user environments.
Defining an Ad Policy
The onBeforeSeek and onBeforeAdBreak hooks can be used to define a policy that determines when users need to watch ad breaks instead of seeking over them and when users can skip ad breaks. This only applies to VOD assets with server-side ad breaks.
NOTE: These API hooks should be registered before calling .init(...) on the player instance.
Suppose you want to enforce an ad policy such that the user must watch the ad break that falls before the seek destination to prevent users from skipping over ads. You could search through the list of ad breaks in the info
object and return the index of the ad break that comes right before the seek destination.
AnvatoPlayer('p0').on('beforeSeek', function(info) {
var watchAdBreakIndex = null;
for (var i = info.adBreaks.length - 1; i >= 0; i--) {
if (info.adBreaks[i].start < info.seekTo) {
watchAdBreakIndex = info.adBreaks[i].adBreakIndex;
break;
}
}
return {
watchAdBreakIndex: watchAdBreakIndex
};
});
Or suppose you want to enforce an ad policy such that the user will not watch the same ad break twice. For each video, you could record the index of each ad break that has been watched. You would then only return true for the skipAdBreak
value in the onBeforeAdBreak
hook if the ad break has not been watched yet.
var watchedAdBreaks = {};
AnvatoPlayer('p0').on('beforeAdBreak', function(info) {
var hasWatched = info.adBreakIndex in watchedAdBreaks;
watchedAdBreaks[info.adBreakIndex] = 1;
return {
skipAdBreak: hasWatched
};
});
You may also apply both hooks to combine the policy rules. If the player evaluates the onBeforeSeek
hook and a watchAdBreakIndex
value is provided, then the player will evaluate the onBeforeAdBreak
hook to determine whether the ad break is actually played.
Playing Live Stream with Live Event Metadata
Publishers can embed live event handle as ID3 frames into their live stream. This handle can be used to fetch live event metadata at the page level and finally this metadata can be passed to the player SDK. SDK updates the UI and relevant plugins using the given metadata.
This workflow involves the following steps:
Expected metadata format
{
"event": {
"def_title": "EVENT TITLE",
"def_description": "EVENT DESCRIPTION",
"def_callsign": "CHANNEL CALLSIGN",
"custom_metadata_map": {
"key": "VALUE",
...
},
"derived_metadata": {
"key": "VALUE",
...
},
},
"server_time": 1603806275
}
-
Create init config
const initConfig = { url: 'YOUR_LIVE_STREAM_URL', format: 'm3u8', plugins: { // as documented in the plugins section }, };
-
Initialize player instance
AnvatoPlayer('p0').init(initConfig);
-
Listen to the
rawId3
event
Player SDK expects metadata format as shown in the sample code pane.
AnvatoPlayer('p0').on('rawId3', function(payload) { // base64 decode the payload // parse and extract the live event handle // determine if this is a new event // if that's a new event fetch the metadata from your metadata server // format metadata to match the sample metadata given above // pass the metadata to the player SDK const primaryMetadata = { title: formattedPayload.event.def_title, description: formattedPayload.event.def_description, }; const comprehensiveMetadata = formattedPayload.event; AnvatoPlayer('p0').updateMetadata(formattedPayload.eventid, null, primaryMetadata, comprehensiveMetadata); }); });
- (Optional) Verify that player SDK dispatches
programChanged
event with the live event handle
Anvatoplayer('p0').on('programChanged', function(eventId, contentReplacementId, primaryMetadata, comprehensiveMetadata) { // You can use this event for logging, verification or page-level tracking. });
Release Notes
Latest Version 3.5.6 (01/21/2021)
- Overrode derived metadata origin from txkadaptor using
derivedMetadataOrigin
init parameter - Updated nielsen event tracking sequence per the latest nielsen requirements
- Deferred
VIDEO_STARTED
event whenexpectPreroll
is set
Version 3.5.5 (01/06/2021)
- Removed assetId param from nielsen
- Prevented now service call during ad
Version 3.5.4 (11/19/2020)
- Provided support for static iframe enabled by setting
dynamicIframe: false
- Provided external live metadata support
- Enhanced in-manifest Web-VTT captions to support X-TIMESTAMP-MAP offsets
- Handled missing WTA icon errors
- Fixed iOS 14 fullscreen events
Version 3.5.3 (10/21/2020)
- Fixed
BUFFER_START
event dispatch for MSE based HLS - Fixed Conviva content duration
- Provided graceful Conviva termination
- Synced embedded and sidecar captions on iOS
- Fixed inaccurate Conviva play start events
- Allowed setting
cookieFlags
for Google Analytics
Version 3.5.2 (09/16/2020)
- Added typescript support
- Made wasm modules excludable
- Provided support for server-side ad insertion "Why This Ad?" workflow
- Rendered WTA only if icon available
- UI layout enhancements for WTA icon
- Prevented gap jumps for waiting event outside buffer zone
- Fixed previous content and poster image showing up
- Updated nielsen ad metadata & API call order
- Updated nielsen airdate format
Version 3.5.1 (08/12/2020)
- Added
PROGRAM_ENDED
event for live streams - Exit fullscreen for DFP ads on iOS
- Fixed DFP midroll stuttering on iOS
- Improved current script detection to prevent plugin obstruction for shared videos
- Added/Updated Nielsen metadata per the latest documentation
- Fixed Nielsen plugin time index tracking
- Added playback origin to the health analytics
- Removed libraryRequested flag once appended is set
- Introduced dedicated error codes for DFP timeouts
Version 3.5.0 (07/08/2020)
- Revealed
updateSsaiSession
for live - Fixed an issue preventing the 3d renderer export
- Added derived metadata support for Conviva context object
- Supported relative time index for seekTo API
- Synced rstv start to HLS clock time
- Provided rstv offset via
startAt
- Allowed relative rstv timestamps
- Added nativeHlsOnIos* config parameters
- Improved support for HLS streams with B-frames
- Fixed heartbeat 1.5.2 issue when playing external videos
- Added ttml as supported SideCar caption format
- Added
vpaidMode
config parameter for client-side DFP - Provided IMA SDK with video element instead of proxy
- Migrated from requirejs to webpack module management and build system
- Ported ES5 modules to ES6
Version 3.4.3 (05/21/2020)
- Added Heartbeat library version 1.5.2 (this version can be selected using
version
parameter under heartbeat config) - Fixed preview matrix mismatch issue caused by unordered pvw_matrices array
- Fixed issue preventing custom Learn More button text
- Removed remaining seconds text on pause for live
- Fixed
BUFFER_END
not firing consistently on Safari HLS - Moved timeout scheduling from IMA LOADED event to CONTENT_PAUSE_REQUESTED event in response to IMA SDK's preloading VAST and dispatching LOADED event earlier
- Enabled live offset for native HLS
- Ignored pause interrupt error during autoplay detection
- Handled the timeout during muted autoplay check
- Prioritized WebVTT over 608 captions
Version 3.4.2 (04/22/2020)
- Unified available bitrate representation between Shaka and other media modules
- Enhanced bitrate reporting
- Introduced
DATE_RANGE_METADATA
event that reveals the HLS #EXT-X-DATERANGE tag which is also the basis forEVENT_ACCESS_STATUS
dispatched for indicating restart tv rights - Converted live-event to live-replay mode for restart tv
- Fixed obstructed live seeks due to seek index and duration comparison
Version 3.4.1 (03/24/2020)
- Prevented live schedule from removing the poster image
- Ignored Shaka media module play promise rejection, if caused by pause
- Updated Conviva player state to playing on catch live
- Enhanced demuxer for SAMPLE-AES support
- Introduced warnings PLAY480 and PLAY481 for unexpected media sequence numbers
- Enhanced Adaptive Bitrate Manager to reserve ABR and bandwidth states
- Canceled failover immediately when playing new asset
- Moved inline anvato extension init script to a file to prevent browser security warnings
Version 3.4.0 (02/19/2020)
- Introduced
textAlign
caption setting parameter - Left aligned custom sidecar caption origins (608 & webvtt)
- Preserved caption text original case
- Enhancements to include RTT for ABR (adaptive bitrate) algorithm
- SDK nows allows injecting custom ABR implementation
- Unified ABR across media modules
- Parsed 608 caption language from HLS manifest
- Provided fallback for parentNode width
- Prevented text plugin from appending .js
- Failover test tool enhancements
- Support the messageData attribute for DASH Event tags
- Added support for the 'dash-session-url' anvack flag
Version 3.3.6 (01/22/2020)
- ES6 migration and refactoring for the Control module
- Detected Shaka Player TextTracks in CaptionEmbedded
- Exposed preview matrices information with
PREVIEW_MATRICES_DETECTED
event - Reduced time to fetch first manifest/segment for live DASH
- Factored out common MSE utilities
- Added range checks to seek requests
- Introduced
BUFFER_UPDATE
event - Made version details available for iframe embed option
- Added tizen to the smart tv device detection pattern
- Removed already played videos from the recommendations
- Added
addToPlaybackHistory
to custom controller interface - Waived the need for setting
enableJwtEvaluation
- Fixed overflowing caption popup label
- Hid ad timer gradient for client-side DFP ads on mobile
- Added support for customizable keyboard controls
- Refactored and unified MSE-Video layer communication
- Generated
CLIENT_BANDWIDTH
event with client's bandwidth estimation - Added custom extension plugin to anvp namespace
Version 3.3.5 (11/20/2019)
- Replaced sprites with inline SVGs, reduced stylesheets to one
- Applied language updates to caption setting, ad learn more
- Added remaining translation strings to locale JSON files
- Added catch live and caption button language updates
- Replaced hardcoded strings to support translations
- Removed ppid from NonceLoader, added click&impression APIs for PAL integration
- Introduced
embeddedCaptionOffset
to offset CEA-608 time stamp - Fixed undefined restartTvTimeInfo preventing failover
- Added support for additional Heartbeat parameters
- Removed
PLAY920
warning after end of playlist - Changed the default volume slider level to 1
Version 3.3.4 (10/22/2019)
- Used client-side freewheel pause/resume APIs to trigger tracking
- Added additional fullscreen browser support
- Set currentItem.sourceLoaded in setSource function
- Added
SITE_URL
macro to the HeartbeatBeta plugin - Fixed Caption UI bug
- Provided translation for custom Skip Ad button. Passed session language to DFP plugin.
- Added fallback generic font family names for caption styling
- End-to-end testing workflow enhancements
- Added initial closed caption support for e2e tests
Version 3.3.3 (09/24/2019)
- Enabled health analytics based on a configurable rate
- Enhanced snapshot API providing
getSnapshot
andsaveSnapshot
API methods - Provided localization for remaining time label
- Added Preview mediator topics to ControllerInterface for UI customization
- Added
preferSideCar
config parameter to prevent CEA-608 captions taking over - Added
siteSectionFallbackId
support for Freewheel plugin - Forced
expectPreroll
timeout when DFP indicates no preroll (using VMAP) - Allowed localhost DASH DRM playback (other non-SSL domains are not allowed)
- Allowed the rstv overrides to the init config on play API
- Converted live control bar to vod for rstv VOD_EVENT mode
- Bound seek to beginning to now - dvr window for DVR mode
- Fixed obstructed catch live during restart tv modes
- Replaced 0 offset month value with 1 offset for prettified date metadata
- Added localization config for Portuguese
- Waited for live schedule before releasing Adobe Heartbeat queued pings
- Fixed heartbeat plugin ad-break position type error
- Provided in-manifest webvtt support for HLS
Version 3.3.2 (08/21/2019)
- Replaced userDiv synchronously for dependent integrations
- Added Picture-in-Picture feature enabled via
enablePictureInPicture
init parameter for supported browsers - Ignored DASH Location tag if the URL does not change
- Turned off Conviva plugin logs unless logLevel is 0 or 1
- Sent time updates to plugins for assets with stitched ads
- Revealed rstv event-access tag via
EVENT_ACCESS_STATUS
- Introduced
liveDelayInSegments
to override default live delay - Added
snapshot(filename='snapshot')
API - Fixed type error during failover while marking fault zones
- Updated PAL implementation based on new PAL document
- Dispatched
PLAY458
for HLS when media src not supported - Dispatched errors if adding to the source buffer fails for live DASH
- Added
DRM002
andDRM003
to errors that trigger failover - Fixed issue where cust_params were not added to DFP adTagUrl
- Used current language for ad countdown text
- Reformatted mseSource files with clang-format
- Added support for HLS SAMPLE-AES encrypted playback
- Persisted caption setting through seek for ShakaVideo
- Enabled toggling of ShakaVideo captions
- Allowed
switchEnvironment
for debug parameter exclusively
Version 3.3.1 (07/17/2019)
- Fixed the issue relevant to the request failure for default recommendation thumbnail used as fallback
- Prevented additional events breaking seek behavior on Safari
- Prevented ended media event before the source is loaded
- Fixed wrong duration value when SSAI preroll is present
- Added firstAdId, firstAdSystem, firstCreativeId Conviva tags
- Added up next recommendation countdown for small player width
- Added support for AES-128 encryption for HLS
- SDK now dispatches
PLAY470
for live DASH when segment requests fail - Waived the need for including
mcp
init parameter making use of the value from remote config - Resized recommendation UI when player is resized
- Forced catch live during HTML5 playback for invalid currentTime
- Delayed
PROGRAM_CHANGED
whentimeoutUntilUpid
is set - Security enhancements against XSS
Version 3.3.0 (06/12/2019)
- Provided synchronous API support together with the encapsulation based on Shadow DOM. This feature can be enabled by setting
asyncApi
tofalse
. - Integrated PAL plugin (via in-iframe proxy)
- Allowed PAL config overrides, updated PAL via DCS endpoint
- Handled ad slot offsets with 'start' value instead of number
- Introduced
timeoutUntilUpid
config parameter to delayPROGRAM_CHANGED
event until upid - Introduced
popOnCaptions
for captions rendered by side-car renderer - Extended
updatePlugin
API method to support updating server-side FreeWheel and DFP configurations - Parsed 403 response detail from JSONP formatted videoJSON to resume failover
- Applied offset & unit conversion to ts for cues & captions
- Persisted bitrate on ad/content switches for DASH VoD
- Reversed script tag matching fallback loop to handle multiple player scripts added with async attribute
- Passed mediaType to Comscore custom plugin API methods
- Adjusted ad slot tracking pings to fire based on content time
- Made currentTime, duration available from video element for MSE based HLS
- Replaced cast sender tv show metadata with generic type
- Preview image count limit upgraded to 400
- Timeline update disabled when ad playing
- Called hardPause when casting to avoid unnecessary downloads
- Replaced remote config fallback url to use gcp bucket url
- Restricted
PLAY490
error to live playback - Conviva plugin enhancements
- Reset isVideoStarted after fatal error in Conviva Plugin
- Conviva Experience Insights - Unexpected new session created for CDN switch
- Passed CDN provider to Conviva for HLS
- Ignored the
DFP010
ad progress timeout error for Conviva - Closed Conviva sessions when exiting the page
- Close Conviva session when playing new asset
- Updated Conviva player state to PLAYING after resuming ad
- Updated Conviva SDK version to 2.151.0.36981
- Handled manifest with no renditions inside
- Preserved restart tv seek offset after a failover
- Enabling publishing
PLAY457
media decode error for MP4 or native HLS playback - Made
disableCustomClickTracking
true
by default - Prevented
BEFORE_VIDEO_LOAD
event during failover - Updated comscore SDK version for custom plugin
- Introduced
contentPauseRequestTimeout
for DFP plugin - Fixed spinning wheel on ie11/edge after gap jumping for DASH
- Cached PlayReady key sessions to reduce license requests
- Introduced onEnded fallback implied from waiting and endOfSteam failure
- SDK now preserves the bitrate estimate after a non-buffered seek (reload with an offset)
- Prevented simulatePlay during autoplay
- Supported content time from the Chromecast receiver
- Retained playlist during failover
- Introduced ad slot events, enabled empty ad slot for FreeWheel ad tracking
- Introduced VoD failover fault zones to move playhead forward on error
- Made moat server-side adId indices configurable
Version 3.2.11 (04/03/2019)
- Hid fullscreen button for non-custom ad playback
- Removed non-fairplay drm evaluation from native HLS playback
- Prevented current ad indicators persisting for VPAID ads in pluginDFP when switching back to content
- Prevented cancelling spinner with non-zero playhead for DASH VoD
- Prevented playlist item's prefetch failure obstructing init
- Provided
beforeBitrateMenuUpdated
hook for custom bitrate labels - Exposed resolution (WIDTHxHEIGHT) to custom UI & beforeBitrateMenuUpdated hook
- Avoided displaying certain components when simulating play to preserve user interaction context
- Fix for Conviva Plugin content/ad tracking issues
- Made HLS master m3u8 cache available throughout a session
- Allowed player to send videoView FreeWheel ping even without ad breaks
- Added client-side FreeWheel parameters and flags:
amcb
,sync
,rste
,durationType
,requestDuration
- Security enhancements against XSS
- Fixed the issue in which short video does start on Edge browser due to browser's not firing canplay event
- Deferred seeks for DASH VoD during pending load requests
- Prevented errors due to missing ad break information
- Used play promise during user gesture for
expectPreroll
- Adjusted SSAI information when playback starts inside an ad for live HLS
- Prevent downloading preview images in chromeless mode
- Added SSAI ad tracking ping for breakEnd event
- Revealed ad tracking urls and restricted them to
chromeless
flag only - Added SSAI FreeWheel specific default and slot prefixed events
- Added SSAI ad tracking for fullscreen events
- Prevented critical offline buffer event before source load
- Introduced
startAtContentTime
to seek to content time - Optimized
startAtContentTime
to prevent additional seek - Cast sender enhancements:
- Cast seekTo and getDuration APIs fixed
- Exposed cast public APIs and integrated next video component
- Hid cast related UI elements when chromeless mode is enabled
- Prevented ad breaks markers disappearing when casted
- Avoided displaying incorrect time index after uncasting
- Displayed cast button during ads
- Updated previews for casted VoD content
- Set offset to the beginning of ad zone when casted during ad
- Allowed casting /w absolute offset via
castWithAbsoluteOffset
- Playback switch from cast to player sdk on cast stop/error
- Provided stale manifest based failover for native HLS
- Handled implicit seek that is encountered when tab is left and activated again on MacOS Safari
- Enhanced failover workflow to resume the cycle
- Prevented starting a recommendation video with a previous offset
- Fixed player from getting stuck if all recommendation videos fail
- Added ad duration to AdDetail object
- Fixed the issue in which the control bar was entering hidden state during an ad
Version 3.2.10 (02/04/2019)
- Failover and playback stability enhancements:
- Enabled failover for empty and stale DASH manifest
- Enabled failover when all HLS renditions are stale
- Enabled failover for all empty HLS renditions case
- Reset capability blacklisting to resume failover flow from error slate
- Added backup url evaluation to live DASH
- Added retries for failed DASH manifest downloads
- Reset the gap counters for DASH upon playback success
- Reset gap counters on playback for JSHlsVideo and ShakaVideo
- Allowed MSE player to adapt to higher bitrates on failover
- Allowed failover retry for external streams
- Prevented following playbacks for a stale rendition
- Allowed retaining failover queue via
resetFailoverQueueOnPrimary
- Content start and client-side ad work flow optimizations:
- Added support for
prefetchHlsManifest
config parameter - Loaded plugin libraries before player initialization to request ads earlier
- Initialized plugins once plugin libraries loaded
- Added pluginInitialized event for pollAds optimization
- Passed the prefetched manifests to MSE layer
- Limited autoplay detection by using priors, device info
- Cancelled log working set and provided stringify from logger
- Enabled opt-in use of cached autoplay evaluation via
cacheAutoPlayStatus
- Added support for
- Persisted selected bitrate through catch live for DASH
- Allowed displaying captions for slate type segment
- Reset DFP plugin currentTime value after content completed
- Prevented player from using wrong startAt after postroll
- Fixed race condition preventing ad tracking for live DASH
- Fixed issue with missing server-side Freewheel parameters
- Allowed external playlist playback when loading with key
- Google Plus button removed on share view
- Enabled
initalBitrate
andautoBitrateSwitch
for DASH VoD and live - Adjusted SDK for IMA SDK's need for the 2nd click on mobile browsers when custom click tracker is used
- Added
adIndex
andtotalAds
toAD_STARTED
AdDetail
object - Prevented
BEFORE_AD_BREAK
at end of video without postroll - Added
ACTRL073
error code when accessKey is restricted - Fixed error when lowest rendition is missing video codec
- Avoided caching single rendition in master cache
- Added
onBeforeSeek
andonBeforeAdBreak
hooks - Maintained seek location after recovering from failed seek
- Passed playback info object to IMA SDK instead of video element
- Updated getCurrentTime method to yield dfp playhead
- Prevented dispatching cues for regions skipped over
Version 3.2.9 (12/11/2018)
- Set assetName only once after PROGRAM_UPDATE on Conviva plugin
- Remove the logic to create new sessions per program on Conviva plugin
- Fixed clickthrough issue impacting client-side freewheel plugin
- Enabled playhead increment based on implicit gap evaluation
- Prevented an issue where the main content starts playback during ads
- Improved detection for media sequence number resets
- Allowed autoplaying the first recommendation when player width is small
- Introduced
triggerResize
method to be used when player is wrapped in a container and sent to fullscreen as opposed to using available fullscreen APIs - Reused Widevine DRM key sessions for live DASH
- Upgraded shaka to v2.5 (used for DASH VoD) with large gap jumps enabled
- Dispatched stream error for MSE based HLS when DRM is configured
- Exposed ad info for
adMediaLoaded
event in DFP plugin - Avoided fetching VideoJSON for external video in playlist
- Added
getCaptionStyle
API method - Added
feedBaseUrl
parameter to override feed API baseUrl - Introduced MSE buffer quotas, prevented exceeding the quota
- Provided deferred gap recovery for previous no buffer during DASH VoD playback
- Added support for the
expectPreroll
config parameter that makes the SDK wait for a preroll with a 5-second default time out - Prevented
expectPreroll
behavior without ad config - Enabled preloading prerolls for the DFP plugin
- Exposed clickthrough, clicktracking urls with AD_STARTED event for SSAI
- Security improvements
Version 3.2.8 (11/07/2018)
- Made
STRICT_MEDIA_URL_ORDER
default playerSelectionType - Ensured loadScript loads safe absolute URLs against XSS
- Fixed viewability event causing error after destroy
- Used ENABLED VPAID mode for ios devices in DFP plugin
- Introduced
aspectRatio
to override default 16:9 aspect ratio - Conviva plugin is now available as a custom plugin
- Avoided case where player gets stuck during failover
- IAS plugin is now available for client-side DFP ads
- Added
SHAK001
to blacklist errors, enhanced failover - Prevented preroll playing in the background during failover workflow.
- Avoided conflict between client-side and server-side ads
- Exposed dfp library, vast and media request and load events
- Fixed bitrate comparison in AnvatoMse when switching up
- Fixed the issue with ad timer text on resize
- Fixed initial bitrate switch issue on Safari
- Avoided processing multiple video or audio streams
- Added prior live offset usage evaluation for DASH catchLive
- Provided autoplay based on viewability
- Provided playlist manipulation API methods
- Allowed multiple event names for on, off/unbind, unbindAll
- Fixed an issue impacting catching live for DASH
- Fixed setBitrate from halting segment downloads
- Added support for
disableMutedAutoplay
config parameter
Version 3.2.7 (10/03/2018)
- Added LEGACY_VM_SUPPORT compile flag for ie11 error for HLS
- Provided 3 optimization modes for MSE based HLS: ASM, MODULARIZED_WEB_ASSEMBLY and WEB_ASSEMBLY
- Limited auto bitrate switches based on screen size
- Performed quicker bitrate switches when player is resized to a bigger size
- Fixed an issue affecting ad clicks for DFP VPAID ads
- Added remote config support for bitrate cap parameters:
disableAutoBitrateSwitchCap
andautoBitrateSwitchCapScale
- Introduced additional stream error code
PLAY480
for HLS streams when the sequence number resets to another offset - Added shareLink to generateEmbed output
- Added segment duration based refresh time for HLS playlist
- Fixed Conviva plugin creating multiple video sessions when blacklisting the stream
- SDK now display error slate of
DRM010
when DRM playback is attempted on a non-SSL page - Enabled seek after seek offset correction
- Added dfp client-side
disableCustomClickTracking
parameter - Set sessionAutoPlaySupport.unmutedAutoPlay in setVolume
- Avoided duplicate 608 captions rendered as sidecar
- Removed the restriction for dispatching
VIDEO_STARTED
event when video starts with a non-zero offset - Fixed issue where ts segment timeout cap could be negative
- Added
isPresentationTime
argument to seekTo API method - Fixed videoJSON to manifest redirect's failover obstruction
- Enabled switching rendition when rendition is stale
- Added ad break duration to
AD_BREAK_START
for DFP CSAI - Added stop call for comScore plugin when the document goes into hidden mode
- Avoided unnecessary stop() calls for comScore
- Added
IMPLICIT_PAUSE
event to distinguish pause events not triggered by user interaction - Introduced
playerSelectionType
andSTRICT_MEDIA_URL_ORDER
- Allowed failover for assets with videoJSON request redirecting to manifest
- Fixed the currentAd is not available due to ad blocker
Version 3.2.6 (09/04/2018)
chromeless
parameter now hides splash gradient and ad timer- Improved caption styling persistence through failovers and renderer switches
- Updated player state for implicit pauses (relevant to tapping on home button on mobile browsers)
- Matched setCaptionStyle API capabilities with those of caption settings UI
- Prevented gap recovery causing completed event during live playback
- Set comscore plugin ad metadata for live content
- Prevented showing control bar icons during ad on resize
- Added
adsRequestTimeout
to DFP plugin - Fixed incorrect AdBreakIndex reported by ad break events.
- SDK now dispatches
PRESENTATION_UPDATED
for FreeWheel ads and main content - Removed VoD only restriction for setCaption API
- Prevented direct gap recovery on waiting event
- Delayed adding source buffer until MSE sourceopen event
- Added derived metadata support for the Nielsen plugin
- Added check for video playback in ShakaVideo during buffering event
- Prevented reload when there is pending play promise
- Provided implied canplay callback based on non-zero buffer
- Cancelled non-buffered seek for Shaka library v2.
- Handled implicit gaps that have no indicator event
- Downgraded shaka library to 2.0 from 2.4 adapting abr
- Player SDK now detects stream type (live/VoD) from HLS manifest sparing the need for setting live flag for external URL playbacks
- Handled the case in which TKX video request returns manifest
- Fixed low bandwidth seeking issues on Shaka media module
- Added manual bitrate switch & abr UI representation for Shaka media module
- Prevented evaluation for playlist items without metadata causing redundant reload and spinning wheel
- Fixed URL resolution for master, rendition, segment URLs after 302 redirect for HLS
- Added support for optional
addTemporalSlot
FW parameters - Allow custom plugins to receive all the player events.
- Fixed
AD_BREAK_START
event is being sent for each individual ad for DFP CSAI - Revealed
enablePreloading
param for DFP client-side ads - Exposed extra ad metadata for client-side DFP video tracking
- Handled sidecar caption file loading failure
- Fixed client-side DFP postroll not getting played when the VMAP has only postroll.
- SDK now skips feed items with falsy c_is_playable_l value
- Published bitrateChanged event for playback using native HTML5 video when media url is set
- Enabled blacklisting of failed recommendation items
- Allowed multiple levels of fallbacks for media modules
- Removed all listeners when destroy is called
- Set player type and version for client-side DFP plugin
Version 3.2.5 (08/14/2018)
- Added derived metadata support for the Nielsen plugin
- Rectricted deferred metadata load to the items lacking media source information
- Updated master, rendition, segment URLs after 302 redirect for HLS
- Added support for optional
addTemporalSlot
FW parameters - Updated volume UI with the actual volume after setVolume, not given volume
- Applied gap recovery to Shaka media module
- Upgraded shaka media library to v2.4.2
- Prioritized local config over remote config for custom plugins
- Provided support audio-only HLS streams
- Delayed opening audio source buffer for HLS until audio found
- Fixed the issue where forward seeks recorded as backward seeks
- Audio plays unmuted if volume is set to 0 and autoplay is enabled but not supported.
- Fixed unmute button needing second click/tap
- Allowed user to interact with skip ad button on iPad
- Fixed the issue with parsing video codec from master.m3u8
- Enabled fallback to muted autoplay when the autoplay detection times out
- Fixed iOS Safari Audio stream does not play after video preroll autoplays.
- Fixed missing setTimeDelta method on custom ui
Version 3.2.4 (07/02/2018)
- Provided ComScore v6.2 integration using custom plugin architecture
- Enhanced HLS media module to support NAL units that are partitioned inside multiple samples
- Introduced a configurable
progressTimeout
for DFP VPAID ads (default is 3 seconds) - Added
customTrackingServerSecure
parameter to Adobe Heartbeat configuration - Fixed the issue in which manual bitrate setting was not preserved through unbuffered seek
- Fixed decremented control bar icons' not getting displayed after increasing screen width
- Fixed mute issue impacting audio only streams on mobile browsers
- Non-buffered seek now seeks to the exact time index as opposed to the segment start
- Enhanced ManualAdScheduler to support external media urls
- Made SidecarCaption case-insensitive to caption label
- Fixed segment abort/timeout for the lowest rendition for bad network
- Added
AUTOPLAY_STATUS
player event to reveal autoplay status: NONE , UNMUTED, MUTED or BLOCKED - Allowed playNext() API call for single item playback
- Added
updateDerivedMetadata
API method to be able to change derived metadata - Added
programChange
API method to be able to set schedule based metadata for external url playback - Introduced network status events with
BROWSER_OFFLINE
,CRITICAL_OFFLINE_BUFFER
andBROWSER_ONLINE
critical buffer pause - Changed evaluation for pausing/resuming ads that prevented pausing during client-side ad due to server-side mode coexisting
- Prioritized the script with data-anvp over anvload.js source to handle page level third parties' interefering with script tag during runtime
- Added condition when searching for anvload.js script tag to handle dynamic script generation and init issue
Version 3.2.3 (05/30/2018)
- SDK now sends
PRESENTATION_UPDATED
event during DFP client-side ads - Allowed passing content specific derived metadata and mapping information to include supporting external URLs
- Fixed adding empty CEA608 closed captions with valid headers that supress side-car closed captions
- SDK now allows implementing custom plugins that get loaded and injected into the player iframe context
- Fixes the case in which pre-roll was regarded as post-roll.
- Refactored ad timer logic into new AdTimer module
- Refactored Learn More button into a new AdLearnMore module
- Loading spinner is now displayed for HLS videos when the player is out of buffer
- Added
CAPTION_DETECTED
event with caption languages as the payload - Implemented manual client-side ad break scheduling for DFP
- Restored the current caption language after detecting 608 captions
- Fixed the issue affecting client-side, post-roll only ad breaks by notifying the DFP plugin of video content end regardless of preroll
- SDK now blacklists renditions after failed download attempts
- Player now hides the ad timer and gradient when
info
set to false
Version 3.2.2 (05/08/2018)
- Fixed the cookie removal issue by removing the path information for IE11/Edge support
- Provided additional polyfills needed for the upgraded aes library on IE11
- Added
IS_OFFSITE
macro and enabledoffsitePlugins
config - Limited server-side ad tracking flag addition to only dcs-*.apis based media urls
- Added autoplay and muted playback information for DFP ad requests
- Isolated hlscore to reduce memory consumption
- Fixed the custom ui volume button not updating with first muted state
- Added trace id
anvtrid
to the TKX requests - Enabled CBC mode for AES library for FairPlay cert decryption
- Added support for getting Fairplay cert from TKX
- Added support for dynamic playlist items with id and token
- Populated playlist node layout for inline iphone/ipod playback
- Added failover in JSHls for media decode errors
- Blacklisted renditions on media decode error to continue playback with proper renditions or fallback to next available media module if none exists
- Added vod/live specific embed parameters to enforce native HTML5 based HLS playback on Safari
- Allowed Facebook Instant Article embed code key to be encoded using long form of config parameters
- Removed splash header gradient if info and control are false
- Modified util.removeCookies to remove from all subpaths
- Added playlistBaseURL support from remote config.
- Allowed passing custom fields in server-side Freewheel plugin
- Allowed using multiple callbacks for get API methods
Version 3.2.1 (04/12/2018)
- SDK now enables server-side tracking for live DAI enabled stream based on the selected media module
- Provided iframe wrapper to handle Facebook Instant Articles resizing issue on iOS
- Fixed 'Play Next' button being displayed for the last item in playlist after entering fullscreen
- Added additional logs for verifying Google Analytics pings
- Introduced
iosCustomPlayback
embed parameter that can be used to play ads in native fullscreen for clientSide DFP on iOS - Enhancements for playing third party HLS streams
- Enhancements for CEA608 closed caption rendering and rescaling
- SDK now blocks autoplay for audio only media if browser blocks unmuted autoplay
- Added native .aac audio playback support
- Fixed CEA608 closed captions remaining on view after an unbuffered seek
- Fixed IE11 (Windows 10) DRM enabled DASH playback issues
Version 3.2.0 (03/20/2018)
- Fixed issue where the player ignores logo sizeFactor parameter
- Logo is now hidden during ads
- Changed cust_params value replacement for '%C' in dfp plugin
- Enabled using DFP client side config from remote configuration
- SDK now clears closed caption buffer when converting a previous segment
- Prevented tracking calls being queued for server-side ad plugin
- Consolidated loadScreen showing up on various custom UI implementations
- Fixed the issue in which clicking skip video button during last video in playlist displays splash but video keeps playing
- Handled discontinuities for init segments
- Replaced pts_offset/pts_section with dts_offset/dts_section
- Enhancements to perform quicker initial bitrate switch for HLS
- SDK now uses the first DTS value instead of first PTS for baseMediaDecodeTime
- SDK now sets play head to the buffer range start for first segment (needed for segments that do not start with a key frame)
- The sdtp mp4 box is now added when it is missing during ISO-BMFF conversion
- Implemented checking for gap after switching the bitrate
- Fixed spinning wheel showing up due to an intermittent delayed playhead update for Firefox browser
- Fixed ad tracking issue by using ad sequence index as opposed to ad index for ad events
- SDK now appends video init data to sourcebuffer only when it is needed
- Implemented caching for video init data per rendition
- Improved support for external streams with B-frames
- Enabled HTTP/HTTPS adaptation for real time analytics
- Replaced gesture="media" with allow="autoplay" for iframes
- Enabled UTF8 encoding and decoding support for aes util methods
- Google Analytics plugin now supports tracking custom events which allows tracking based on the event payload
- Fixed the issue in which Heartbeat v1.5 video complete event is not tracked after a user performs seek
- Enabled support for VMAP with both linear and non-linear ad content
- Fixed live flag overriding explicit autoplay false setting
- Allowed FreeWheel AdManager to be configured in onBeforeVideoLoad hook
Version 3.1.7 (02/06/2018)
- Improved autoplay detection for Safari browsers
- Fixed closed captions settings color picker overflow on Firefox
- Fixed time index label showing up after resize for live
- Enabled deferred metadata fetching for playlist UI
- Fixed Moat client-side plugin not getting initialized
- Fixed autoplay mute lock evaluation for native media playback
- Added dfp clientSide
bitrate
parameter which makes IMA SDK select an ad video lower than this bitrate
Version 3.1.6 (01/24/2018)
Enabled dynamic autoplay capability detection to handle new autoplay policies enforced by browsers such as Chrome 64+, Safari 11+. This detection provides three suggestions and the player SDK takes the actions in the order listed below:
- Unmuted playback is allowed: Player SDK proceeds with unmuted autoplay
- Muted playback is allowed: Player SDK proceeds with muted autoplay and stays muted until the user unmutes the video.
- None of them is allowed: Player SDK waits for the user's tap/click on play button to start playback.
Version 3.1.5 (01/18/2018)
- Fixed an issue which prevents custom UI rendering for share link, AMP and Facebook Instant Articlers
- Now it is possible to change freewheel configuration using onBeforeVideoLoad hook
- Enabled 3rd party cookie blocker checker for Safari on Mac OS
- Introduced
getPlaylistIndex
API method andPLAYLIST_ITEM_CHANGED
event to reveal playlist index - Fixed the SSL error caused by the outdated Freewheel AdManager library URL.
- Enhanced gap handling near the end of HLS stream evaluating the unbuffered seek offset
Version 3.1.4 (12/21/2017)
- Made freewheel library URL socket adaptive
- Prevented the latency in closed captions showing up
- Measures taken to handle imminent autoplay policy change with Chrome 64+
- Improved the playback for external HLS streams with backup streams
- Fixes handling preamble for CEA608 captions
- Fixed single quote breaking iframe generation when passes with inline data-anvp or init API method
- Fixed clientside freewheel ad to content switch
- Fixed unclean end of aac frames error
- Added DFP clientSide parameter
fullAdClickableOnMobile
- Prevented further polling when an ad blocker blocks the library for the DFP plugin
Version 3.1.3 (11/20/2017)
- Control subcomponents can be hidden using the name +
ButtonVisible
embed parameter - Fixed default ui control bar gradient showing up in the custom ui
- Converted s3 based urls to google storage based ones
- Fixed ad tracker indices mismatch
- Introduced preferredCdn to prioritize one cdn among multiple sources
- Enabled tracking for breakStart and ClickTracking vast events
- Enabled tracking for smart xml videoView events
- Disable fullscreen button for Android WebView implementations. Android WebView does not currently support the fullscreen API.
- Styled DFP 'Learn More' button consistently between android/ios
- Prevented ciu_sz appending to zero size companion entries (zero size companion entry is used for getting all sizes for testing purposes)
- OnCaptionUpdated, set caption setting to current language if available
- Added playbackOrigin to the PLAYING_START event
- Added pagination to recommendations UI
- Added config parameter
bufferForCatchLive
for HTML5 player catchLive - Added layout configuration for overlay ads (non-linear DFP ads)
- Introduced
derivedMetadata
embed parameter which is used for passing derived metadata from application layer. - Show poster image before video loads when autoplay is true
- Added support for ComScore library v5.2.0 Added DerivedMetadata support in ComScore plugin (new plugin)
- Made buffered seek for HTML5 player catchLive instead of reload
- Limited min and max font size for nativeController captions
- Added config param to render 608/sidecar captions for Safari HTML5 player
- Introduced
SITE_URL
macro for heartbeat - Introduced
streamTokenizationCheck
embed parameter
Version 3.1.2 (10/12/2017)
- Prevented new dfp iframes being appended which blocks ad clicks
- Prevented now service based program change event overriding an event info that starts earlier than the schedule
- Enabled backup vcodec value in case CODECS atrribute is not provided for a rendition
- SDK now appends ciu_szs to DFP adTagUrl in the presense of companion placeholder registration
- Reset RTAnalytics hotspots when new asset is loaded
- User-defined labels now fully supported via onBitrateUpdated. If multiples bitrates are mapped onto the same custom label, the label will correspond to the higheset bitrate that maps onto it.
- Allow feed id to be provided for recommendations
- Made codec info extraction space insensitive
- Filtered out audio only renditions from HLS manifest parsing
- Set ad/ad break index and duration to -1/0 when undefined (heartbeat requests on seek event)
- Prevented autoplay on android with dfp ads when no initial ad config given but set with onBeforeVideoLoad hook later
- Introduced
allowAutoPlayWithAdsOnAndroid
embed parameter for testing DFP's autoplay support - Exposed DFP ad error codes in the error event appended to the end
- Introduced the use of default image for recommendation items to prevent blocking due to the missing images
- Provided a tkx data adaptor to be used with a lightweight generic player sdk added build config for data adaptors non-minified version of requirejs is needed for local debugging
Version 3.1.1
- Fixed autosizing issue impacting browsers on Android.
- Made HLS tag parsing whitespace insensitive
- Added device id to tkx requests populated with a UUID cached for 6 months
- Fixed mute API call removing muted attribute that blocks mobile autoplay
- Fixed closed captions' losing sync for MSE based HLS
- Increased default side car lines to 3
- Enabled closed caption customization for CEA-608 type on MSE based HLS
- Enabled timed metadata parsing from rendition custom tags
- Enabled closed caption customization for DASH captions
- API method
playByIndex
is now available to play an item by index as opposed to video id - Changed the live chapter context for Adobe Heartbeat & Nielsen when derived metadata is enabled
- Derived metadata is not enabled by default for Adobe Hearbeat & Nielsen plugin
- Audio only (mp3 containter) playback capability is now available using direct media
url
andformat
as mp3
Version 3.1.0
- Prevented DRM detection for non-SSL pages
- Added
DRM020
error indicating that FairPlay cert is not accepted - Implemented auto bitrate switch for DASH Live
- Enabled manual bitrate selection for DASH Live
- Enhanced autobitrate switch heuristics
- Exposed
CUE_POINT
andSEGMENT_BEACON
events - Realtime analytics enhancements to cover tracking error details and hot spots for VOD
- Fixed splash mode stuck at loadScreen for stitched ads flow
- Added debugMode support for joint Heartbeat Nielsen SDK (needed for certification through log messages)
- Fixed the bug causing 360 playback to fail
- Fixed
TIME_UPDATED
not firing for replayed section after a backwards seek - Removed intent player related triggers
- Handled the issue in which chrome throws a video error while performing DRM detection
- Implemented MOAT plugin for server-side stitched ads
- Enabled iOS inline IMA support
- Event and caption parsing for live DASH streams
- Added support for MOAT with DFP client side ads
- Enabled derived metadata for joint Heartbeat Nielsen plugin
- Upgraded joint Heartbeat Nielsen library to 1.6.9
- Made custom UI assets' relative URLs relative to the page as opposed to the SDK base URL
Version 3.0.8
- Support for non-conformant encoder codec parsing string
- Removed static xUrl service url (placed for demo purposes)
- Updated flash binary to include dfxp parsing for dfxp millisec.
- Provided Promise polyfill for IE9+
- 360 Turn on strategy changed, prevented potential multiple async callback to load 360 dependencies
- Fixed embed code not displaying protocol correctly
- Cancelled Loader level pluginUpdate that only updates references, converted it to re-init supported plugin (dfp currently)
- Handled pluginUpdate called after pollAds->requestAds
- Added error code expected on browsers running on iOS devices lacking DRM support:
- 'DRM004', 'The browser does not have DRM support', true
- Improved Safari browser detection
- Added error codes:
- 'DRM010', 'DRM is not allowed on a page without SSL', true
- 'DRM011', 'Browser does not support DRM encryption type', true
- Fixed the issue causing dai vod dash with drm to stall after add
- Handled gap with readyState 4 at the beginning for shaka adaptation layer
- Fixed playlist load image problem on the first 2 seconds
playlist
embed parameter now accepts external url objects, also mixmatching video id and external url is allowed- Removed playlist item limit ios Caption issue fixed, embedded caption selection via player controls supported (previously only by device settings)
- Exposed a callback
onBeforeVideoLoad
and eventbeforeVideoLoad
which provides a way for those callbacks/listeners to return a modified config blocking the video load. Using these changes one can change the dfp config before each load. - Added support for getting video projection mode from MCP
- Fairplay drm is now available for native hls playback on MacOS Safari browser. This blocks MSE capability in the presence of drm config while loadinf HLS on MacOS Safari
- Enhancements in 360 feature
- Send comscore pause during ad
- Elapsed time is now available for analytics plugins
- Waived the need for passing a profile for heartbeat plugin when a config is provided via page level config or remote config
- Additional play tracking for nielsen per up-to-date documentation
- Added xUrl support to cast sender
Version 3.0.7
- Enhancements in Nielsen plugin
- Provided a timeout between dfp plugin loaded and started event with
default 5 seconds and configurable with
startTimeout
embed parameter underdfp
->clientSide
- Enabled master caching for MSE based HLS playback configurable with
masterCacheDuration
embed param with the default 30 seconds value - Bound bitrate set methods and events to flash player
- Enabled HDS support via flash player
- Added error code VMNG020 to notify media formats are not supported
- Enabled error slate for critical error messages respecting previously displayed error message
- Prevented request to an invalid playlistJSON location
- Exposed
getAdDuration
API method to cover server and client side ads - Fixed splash not showing up when poster image url is not accessible
- Prevented duplicated timer starts on multiple ad starts during failover
- Fixed byte-range to non byte-range switch for MSE based HLS
- Fixed play button staying after implied mobile pause (browser trigerred pause) during ad
- Caption button is removed from small player sizes
- Enabled
initialBitrate
andautoBitrateSwitch
embed parameters for MSE based HLS - Enabled support for DFP overlay ads
- Introduced the event
NON_LINEAR_AD_DISPLAYED
for overlay ads - Extended the pause on click behavior via
pauseOnClick
embed parameter to include resume - Prevented share button click's causing pauseOnClick
- The play API now accepting array of video ids and external url object
- Enhancements for Google Analytics custom dimensions
Version 3.0.6
- The pause on click behavior is now available via
pauseOnClick
embed parameter play(mediaInfo)
API now accepts array of video ids and objects populated with externalurl
- Google Analytics is now available
- Security enhancement for flash binary
- The error slate displayed when a 360 video is played on a browser lacking 360 support can now be disabled with setting
display360ErrorSlate
to false. - 360 playback on mobile browsers now supports swapping to navigate
- Fullscreen button can now be hidden using
fullscreenButtonVisible
embed parameter - Looping through the playlist is now possible using
loop
embed parameter - The player now preserves fullscreen mode for playlist as long as there is next item in the playlist
- Error codes
PLAY455
andPLAY456
are introduced - Failover enhancements to cover unsupported codec cases
- MP4 media can now be downloaded using the download button enabled via
downloadable
embed parameter - Fixed logo initial resizing problem
- Integrated playready and handled license server selection heuristic based on the browser support
- The channel, ovp and sdk in Adobe Heartbeat are now configurable using the embed parameters
channel
,ovp
andsdk
underheartbeat
- Applied stream gap handling to shaka strategy/adaptation layer
- SDK init sequence is changed; the script tag is now added first without data-anvp property and
init
API method is called with ithe init configuration - SDK event listeners can now be added using
on
and removedunbind
methods - Individual event listener now accepts camelcase event names as well
- The following error events are introduced to indicate lack of drm support:
DRM002
, Failed to initialize media keys, criticalDRM003
, Media keys needed for DRM session are not initialized on video element, critical
- Fixed DASH playback start problem caused by async play
- Added
SHAK002
, Browser is not supported by Shaka media module to play the stream, critical error - Fixed the issue in which
live
flag is overriding theautoplay
set to false - Fixed stitched ad postroll to splash switch replicated on Shaka integration
- Propogated the Firefox stall fix to DashVideo
- Fixed the issue in which Firefox gets stuck on non-buffered seek/offseted start
- Enabled Playready DRM license server config
Version 3.0.5
- Now DASH support is available for both live and VoD content
- DRM support for DASH format is now available
- Fix for stitched ad postroll to inital screen switch replicated on Shaka integration
- Fix for live content's overriding the autoplay setting
- Fix for the issue in which Firefox 51+ gets stuck on non-buffered seek/offseted start
- Updated email server url with https enabled one
- Replaced flash binary with ligth weight version
- Added non-critical error code
ADTR001
, Failed to enable click through due to the missing tracking info - Styling fix for IE9-10 count down timer
- Disabled autostart in the presence of DFP plugin on iOS
- Introduced the following error codes:
SHAK001
, Shaka media module encountered an issue while loading the stream, criticalVMNG010
, No published urls in the provided source, critical
- Fixed the VoD Dash replay issue on shaka player caused by async Shaka destroy
- Skip button customization is now avaialable
- UI elements are now hidden until flash player loads in fallback mode
- Fixed share icons click issue for live content
- Fixes IE 9-10 compatibility issues blocking player load
- Fixed
mute()
API methods requiring duplicated unmute button clicks - Fixed Samsung S5 Native Player related issues
- Player SDK now can get and prioritize DFP ad tag url from MCP video config
- Blocked autoplay for the following combinations
- Android + dfp client side
- iPad/iPhone + dfp + lack of inlineVideoPlaybackSupport
- Firefox for iOS
- The following events are fired in the above cases:
PLAY511
, The browser does not support autoplayPLAY512
, Autoplay blocked due to the lacking support in DFP Plugin
- Fix for small size player styling
- Event
SKIPPABLE_STATE_CHANGED
is introduced skipAd()
API method exposed- Translation enabled for skip ad button (applies to the custom video element usage on DFP which is observed on iPad Safari)
- Fixes for recommendation view, its timer and replay click
- Fixed the volume icon and stream volume mismatch
- Added optinal pauseOnClick functionality in which only splash is clicked to pause and not the play button
- Fixed MP4 playback problem on Firefox
- Implemented ComScore extended requirements
- Fix for Freewheel issues on Android
- Caption button is removed during ads
- Enabled EXT-X-BYTERANGE support for MSE based HLS
Version 3.0.4
autoplay
embed parameter now accepts passing in macros- Fixed the issue in which control bar stays while playing content on mobile browsers
MEDIA_URLS_SET
event is now available with published urls payload enabled by embed parameterrevealMediaUrls
- Added
getPoster
API method - Added instance id to
onReady
callback dedicated to the each instance - Fix for (progressive -mp4-) seek issue on MacOS Safari
- Fix for the fullscreen issue on Safari browsers
- Added
IS_DESKTOP
macro - Added
AD_SKIPPED
event with adId, adIndex and adDuration payload - Added
SSHR100
error code whose info is populated with email server response - Added
emailServer
embed parameter to override email server (remote config override included) - DFP plugin now replaces inline macros given in the
adTagUrl
- Fixed the issue of following video macros not getting updated in playlist
Version 3.0.3
Summary of features:
- MSE based HLS playback on desktop and mobile browsers
- Timed metadata extraction on Android browsers which is useful for more timely schedule information and more ac curate analytics services
- Embedded closed captions on Android devices
- Mobile autoplay and inline playback on mobile browsers
- 360 view on desktop and Android browsers. (Apple device browsers are currently lacking the WebGL CORS support needed for 360 view.)
- Fine tuned auto bitrate switch and better manual bitrate switch experience on browsers supporting MSE specification
Version 2.142.15
- Updated email server URL
- IMA SDK companions can now be fetched regardless of companion size by setting companion width and height to 0
- Added version strings to anvp namespace
- Handled possible error logs caused by passing non-existing plugin config to plugins section
- Included flash side fix for missing
VIDEO_STARTED
event on replay - Google Analytics plugin is now available to support the latest Google Analytics libraray
- Made Google Analytics event category configurable with
category
embed parameter undergoogleAnalytics
config - Changing playhead time for ads in heartbeat plugin is now possible using the embed parameter
changePlayheadDuringAds
underheartbeat
plugin config - Fixed chapter index change on seek for heartbeat chapter tracking for server side stitched ads
- Fixed the issue in which JSON polyfill is encountering a conflict in commonjs like environments
- Play API method now supports tkx
token
- Handled the case in which IMA SDK starts an ad although the ad is not classified as preroll (no previous ad events either)
- Fix for supporting any non-abbreviated param from base64 key (wordpress generated sharelink)
- Fixed the control bar popup regression including css changes
- Minor styling changes for Notification (used for Nielsen)
Version 2.142.13
- Introduced
accessEnablerLoaderPath
embed parameter that allows Adobe Pass binaries to load from a given url - Fix for logo dynamic resizing issue for IE browser versions lacking offsetHeight support
- Added
ownerId
,categories
,tags
fields to theMETADATA_LOADED
event payload - Rounded bitrate labels for kbps.
- Fix for the issue related to the handling HLS tag EXT-X-MEDIA-SEQUENCE
Version 2.142.12
- Added
HOST
to supported macros - Added
PLAY920
No next item in the playlist (non-critical) andPLAY921
No previous item in the playlist (non-critical) error messages - Added user field enabled realtime analytics
- Play next button is now available
- Prevented the case in which load screen is shown briefly after a playlist item is selected
- Added android tv (nexus player) device detection
- Fix for ad count down timer for stitched ad work flow
ID3
event payload now includes the publisher as the second parameterseekTo
API method is now deferred when player is not ready to seek- Introduced
CAPTION_DETECTED
event to notify about caption type (sidecar or closed) and caption languages (HTML5 mode for now) - Fix for closed caption appearing on pause (exit on ott -firetv- apps)
- Fix for the issue of closed caption remaining on ended video event
- Implemented ComScore extended metadata using derived metadata
- Updated logo widget to ignore empty
targetURL
so that it can be also used as watermark - Added
getThumbnail
API method - Real time analytics plugin now reports video view hotspots
- Added embed parameter
deviceId
to be passed to the tkx for ad targetting etc
Version 2.142.11
- Fixed the issue related to the client-side ads from DFP that do not have an assigned schedule overlapping with content playback (HTML5 mode only)
play(videoInfo)
API method now triggers the initial view in the absence of user interaction on mobile devices (external playlist usecase) as opposed to trying to play the contentgetPlaylist()
API method now includes thumbnail in addition to the previously available poster image withthumbnail
andsrc_image_url
entries- Other service updates
Version 2.142.10
- Three user fields are now available in
realTimeAnalytics
config:uf1
,uf2
,uf3
- Enhancements for resume and seek during playback on iPhone Safari browser
- Nielsen plugin is now available for Adobe Heartbeat Analytics
- Nielsen (as Adobe Heartbeat plugin) opt-out via embed parameter is now available:
optOutOverride
undernielsen
underheartbeat
to start opted out - Nielsen (as Adobe Heartbeat plugin) opt-out/in via API method is now available
optInNielsen()
andoptOutNielsen()
- Fixed client side preroll and content volume sync issue
- Fixed non-precached items in a playlist issue impacting mobile browsers (HTML5 mode)
- Fixed buffering view issue caused by ad blockers
- Fixed the issue related to stitched ad duration vs content duration tracking on Adobe Heartbeat
- Enforcing SSL for resources loaded on an SSL enabled page
Version 2.142.9
- Enabled initial bitrate override from remote config
- Fixed the auto bitrate label while using manual bitrate selection which applies to progressive media playback on HTML5 mode
- Handled an issue in which VPAID preroll is failed without calling onAdError on dfp plugin
- Updated search closed captions text
- Enabled
chromeless
embed parameter to match flash and coverinfo
,control
andspinnerVisible
embed parameters - Fixed playhead values for stitched ads in VoD playback
- Enhancements for ad playback in Android native browser
- Playlist icon is now hidden during ad playback
- Fixed buffering issue associated with
preload
embed parameter - Fixes related to the playlist use case along with
preload
embed parameter - Added favicon for shared videos
getEmbedCode
now supports w3 deployment location deployed with short cache entry point- Fix for encoded nielsen payload issue in Flash player mode
- https override added for parent pages served with https
- made playlist JSONp urls socket adaptive
- Playback enhancements on IE browsers
- Enabled passing page level heartbeat custom metadata which overrides internally managed ones in case of a conflict
- HDS format deprioritized while selecting source on Flash player mode
- Added traditional chinese language support
Version 2.142.8
- Compatibility enhancements for IE11
- Introduced
token
embed parameter that is part of the embed code/share link generated from MCP - Nielsen ID3 tag extraction enabled on HTML5 mode
- Updated Real Time Analytics time delta calculation to support absolute time string (enabled by absTime)
- Enhancements for multi-closed caption support on HTML5 mode
- Adobe Heartbeat Flash library security update
- Flash fix for preserving the volume setting while switching from client side ad to content.
Version 2.142.7
- IMA SDK URL is now socket adaptive
- Enabled SSL evaluation for Adobe Heartbeat plugin
- Fix for implicit buffering detection
- Fix for countdown timer learn more button fix overlap
- Previously shared videos using older Heartbeat version are now enforced to use Adobe Heartbeat 1.5
- Chinese language support for displayed metadata
- Fixed the issue related to the external url and Heartbeat version 1.5 conflict
- Introduced
setStartType
API method for external playlist and live use cases - Enhanced support for playback and embedded captions of external streams
- Introduced
token
embed parameter that is generated by backend service to sign the tkx requests - Added the support for
token
parameter in the share link - Waived the need for player ID in the share link
- Heartbeat plugin can now fallback to use static metadata in case schedule information is not available for live stream.
Version 2.142.6
- Nielsen plugin is now available with DTVR service.
- Nielsen plugin uses production library by default while it is possible to override environment with embed parameter
environment
undernielsen
namaspace. BUFFER_START
andBUFFER_END
events are exposed to notify the application layer about buffering- Bug fix related to the client side ad volume control while using HTML5 mode on desktop browsers.
- The player SDK now avoids preloading the stream on HTML5 mode unless
preload
is set to true (applies to desktop browsers since mobile browsers does not allow that) - Chromecast sender library is now socket adaptive for SSL pages
- Service updates including the ones related to supporting external streams
Version 2.142.5
- In case a video is embedded with the html5 flag set to true, it is carried over to the shared video
- Non-tkx work flows are now enforced to tkx work flow with accessKey injection
- HTML5 player now resizes inside shared video iframe while the task of maintaining the aspect ratio is still the publisher’s responsibilty
- Heartbeat API call sequence updated to match Adobe Heartbeat Dec 2015 documentation: https://marketing.adobe.com/resources/help/en_US/sc/appmeasurement/hbvideo/video.pdf
titleVisible
embed parameter added for hiding title in player overlay screens- Device detection enhanced for Asus Android devices
- IE11 flash issue fixed by introducing the embed parameter and accompanying macro;
useDirectWMode: “[[IS_IE11]]”
- HTML5 player now can use any external media module / proxy for playback given
externalVideoInterface
is set to true andexternalMediaCall
callback is implemented under anvp.{PLAYER_INSTANCE}
Version 2.142.4
bitrateMenuVisible
embed parameter introduced for hiding bitrate iconIS_IE11
macro is introduced to be used at the first level embed parameter and evaluated as boolean.printConfigs()
underanvp
name space included to get merged configs of all players in a pageprintConfig()
underanvp.{PLAYER_INSTANCE}
name space included to get merged configs of the specific player- “Learn More” button enabled for ios devices where DFP can not place its own Learn More button
- “Skip Ad” button enabled for DFP ads allowing skip
- The bug related to the blocked the 3rd party cookies impacting VOD has been fixed
- Adobe Heartbeat tracking is now available for external live streams without schedule service
Version 2.142.3
IS_MOBILE
macro is enabled to be evaluated as boolean for the first level embed parametes- Error
PLAY410
, “The content has expired” (non-critical) added - Fix for DFP IMA SDK’s click/tap behavior change on mobile browsers
chapterTracking
embed parameter is now available under heartbeat to disable tracking chapters.- Enabled insecure iframe mode for IMA SDK
- Other service updates
Version 2.142.2
- The following error messages are added:
ACTRL070
, “Failed to generate security token. Possible reason: accessKey is not recognized” (critical)ACTRL071
, “Failed to retrieve the content. Possible reason: the video ID is either invalid or not provisioned for the accessKey” (critical)ACTRL072
, “Cannot access this video or channel.” (critical)ACTRL079
, “Generic backend error” (critical) added. The error information is replaced by back generated error message.LOAD020
, “Missing/outdated Adobe Flash Player plugin” (critical)LOAD021
, “Blacklisted Adobe Flash Player plugin version detected” (non-critical)SCOR001
, “Failed to get a valid Comscore clientId (c2)” (non-critical)ADST001
, “Failed to get ad breaks” (non-critical)PLAY900
, “Schedule service returned an expired event” (non-critical)
autoHideDelay
embed parameter is introduced to configure delay for hiding control bar and splash (default is 3 seconds)updatePlugin(pluginName, config)
API method added for changing plugin parameter on the flyupdateMvpd(mvpd)
API method added for changing mvpd name on the fly for analytics (the use case of adobe pass page level)- Introduced
enforceFlashBlacklist
embed parameter to notify the user about updating flash plugin for predefined flash versions - Stitched Ad UI support to detect and display ad breaks for HTML5 player
- The following events are introduced/standardized across mobile/desktop browsers:
AD_BREAKS
, “Ad breaks detected in the content”AD_BREAK_STARTED
, “Ad break has started”AD_STARTED
, “Ad has started”AD_COMPLETED
, “Ad has completed”AD_BREAK_COMPLETED
, “Ad break has completed”BUFFER_LIMIT_UPDATED
, “Buffer limit has been updated”. This event is enabled withrevealBufferBufferInfo
embed parameter. Enabled with revealAdBreaks embed parameter for ad stitched playback on HTML5 playerPRESENTATION_UPDATED
, “Current time, total time or content type has changed”METADATA_LOADED
, “Program metadata loaded”
- Passing
version: “1.5″
in heartbeat config is now enough for enabling v1.5 Heartbeat analytics without settingflashPath
embed parameter - Description is removed from the default player UI.
Version 2.140.0
- HTML5 DFP plugin based on IMA SDK is upgraded
- HTML5 DFP preroll playback issue for replays is fixed
- The bug related to the HTML5 DFP postroll is fixed
Version 2.139.4
- Fix for IE ad error (Flash Player)
- HOST macro enabled for comscore
- Prioritization for MP4 base profile on non-safari desktop browsers
- Video load error messages enabled to include network and ready states (HTML5 Player)
Version 2.139.3
- The error
DFP010
, “DFP plugin encountered an error” (non-critical) added. - Third party cookie checking is performed for only JS based Adobe Pass and stream served from Akamai.
- Third party cookie checking is diabled for IE and Safari browsers due to their third party cookie evaluations.
- Analytics plugins are now fed with rovi id instead of event id if rovi metadata is provisioned for the client.
- The bug related to the repeated preroll in case of an unavailable stream is fixed.
- Custom desktop player path is now available with
flashPath
embed parameter.
Version 2.139.2
- The error
ACTRL060
, “Adobe Pass did not return any valid service zip” (non-critical) added - Third party cookie checking is enabled for adobe pass
- The error
PLGNL001
, “Failed to initialize the plugin” (non-critical) added - The error
HRTBT001
, “Failed to get a valid account ID (RSID)” (non-critical) added - Deferred resizing fix for orientation change event on mobile/tablet devices
- Adobe Heartbeat Analytics plugin config now accepts Adobe RSID API information for populating “account” (RSID) during run-time
- AuthZ Token verification enabled
- Device detection is enhanced to detect Samsung S6 and Chrome OS capabilities
- Custom targeting macros are extended for DFP ad plugin to include the following templates under
keyValues
entry:MCP_ID
VIDEO_ID
OWNER_ID
CATEGORIES
TITLE
DESCRIPTION
DURATION
PROGRAM_NAME
- The 3rd party cookie checker is now baseURL and secure socket adaptive
- Cache buster for playlist files
- The error
MPX007
, “No valid items in the feed” added - The issue related to the black bars on Chrome browsers attributed to the latest PPAPI Flash plugin and hardware accelaration is fixed
Version 2.139.1
- Enhancements on device detection
- VOD metadata lookup is introduced to be enabled by selective embed parameter under accessControl to bypass entitlement for specified videos
- Intent Player initialization is enhanced to include tkx enabled flows
- The event
PROVIDER_LIST_SET
is introduced to expose providers from Adobe Pass plugin
Version 2.139.0
- The bug preventing playlist mode with tkx enabled flow is fixed.
- The configuration for ad plugins is now divided into
clientSide
andserverSide
so that client-side preroll and server-side stitched ads can be served together (backwards compatible). - Introduced DFP targeting using the embed parameters:
keyValues
for general targeting,shareKeyValues
for shared videos under dfp or clientSide/serverSide entries. - Macros are introduced for including run-time metadata in ad targeting (dfp) and comscore configurations.
- Adobe Heartbeat plugin implementation is upgraded to use the latest Adobe libraries.
- Comscore plugin implementation is upgraded to use the latest libraries.
- The bug related to the initial
SEGMENT_TYPE_CHANGED
with “master” argument is fixed. - The event
FIRST_FRAME_READY
now has eventId as the first arg if available for live stream. - The schedule service is implemented for both Desktop and Mobile/Tablet.
- The event
PROGRAM_CHANGED
now has the 4th argument detail to display all metadata from rovi - The event
NEXT_PROGRAM
is introduced with similar payload ofPROGRAM_CHANGED
. - Mobile/tablet player now updates the title and description of the live program sent to the analytics services.
Version 2.138.1
- The event
COMPANION_AVAILABLE
is introduced to provide an alternative approach to processing companion ads. - Missing or incompatible Flash Player plugin error message is enabled.
- Rating configuration is extended to include custom rating images using the embed parameters
logoBaseUrl
andformat
. - Sharing via e-mail is enhanced to avoid spam filters enabled on specific mail service providers.
- Subscription based entitlement flow is enabled with the Login interface in the player; the event
SUBSCRIBER_AUTHORIZATION_STATUS
is introduced to get the status updates. - Any ad duration mismatch affecting the quartile tracking for DAI (Digital Ad Insertion) is now handled by the player.
Version 2.138.0
- The scrollbar bug appearing on IE9 is fixed.
- Mobile/Tablet playlist now has fallback image in case of a missing thumbnail or image load error.
- Playlist button is displayed only if there are more than 1 videos and embed parameter
playlistMode
not set to“external”
. - Desktop player playlist selection issue is fixed.
Version 2.137.4
- Debug value for the duration between Long Preview and Short Preview has been replaced with the production value (24 hours).
Version 2.137.3
- Control bar now has configurable remaining color (on Tablet).
- Display and hide API methods for main components are provided (on Tablet/Mobile).
- Auto-switch to next item while playing a playlist is now the default behavior.
- Event updates on iOS 8.x affecting seek and pause upon a tap on a preroll are addressed.
- Bug related to 1 item playlist is fixed.
- Maximum item amount in playlist is increased to 30.
injectStyle
api method added for testing a custom stylesheet.
Version 2.137.2
- The entries about the live event restriction,
mvpdAuthenticationNeeded
andtveCheckNeeded
, are added to the metadata provided byPROGRAM_CHANGED
event. USER_INTERACTION
event is enabled for goLive API method.- The bug related to the messaging encountered while embedding multiple players is fixed.
Version 2.137.1
- Encrypted zips provided by MVPDs (with the encrypted flag set to true on setMetadataStatus) are handled as hzip in post data and fired with
HOME_ZIP_DETECTED
event. zipDecryption
embed parameter is introduced to maintain decryption request sent by player (needed for entitlement flows at which decryption is handled by player side request); default is false.POPUP_BLOCKED
andPOPUP_DISPLAYED
events are activated for provider login window handled by Flash based Adobe Pass (needed for only Safari Browsers due to its user interaction context detection for Flash). JavaScript based Adobe already has these events enabled.
Version 2.137.0
- Fail over logic is implemented for supported live streams. The event
FAILOVER_STATION_LOADED
is fired with the first argument as the failover channel upon a successful switch to failover channel. - Social and e-mail share link is detected using the followings in order:
- User override with
shareLink
embed parameter, - Facebook open graph tags,
- SEO canonical URL,
- Parent page URL.
- User override with
- Share at is enabled to cover emailed share links. This feature works by using
anvt
URL parameter andstartAt
embed parameter. - E-mail share is now using HTML based template.
- “Skip Ad” button’s location is now configurable using the embed parameter
skip
. A sample configuration is similar to that of rating and logo widgets:{location:”TR”,margin:”10px”}
.
Version 2.136.18
baseURL
is deprecated; providing a valid source URL is sufficient for switching the environments. The usage of ‘//’ in script source for adapting to the protocol http or https is still supported.- User interaction context is changed to bypass pop-up blockers’ blocking provider login pages in
refreshless
mode of Adobe Pass. - Debug message filtering is available by passing an array of module names to the
debug
embed parameter. Each module’s messages are displayed in a different color in supported browsers. - Flash log mesages are directed to the Logger module. It can be filtered by setting
debug
embed parameter to["Flash"]
. - Absolute timestamped logging implemented on Logger. This is enabled by setting
absTime
.
Version 2.136.14
- Adobe Pass’ “Internal Authorization Error” for a valid credential has been prevented.
- AccessControl module is now performing the TVE Check after authZ check for providers failing to provide service zip after authN.
- Player now supports static companions with creative type “application/x-shockwave-flash” (for server-side stitched streams).
- The event
PROGRAM_CHANGED
is now more accurate using additional parameters. - The event
COMPANION_INJECTED
is introduced to notify the SDK user about the companion. For server-side stitched ads this event is fired always afterAD_STARTED
event. - Resource for events with no rating is passed to the Comcast SSO as a blank string as opposed to “TV-Y”.
- The event
SEGMENT_TYPE_CHANGED
is introduced for distinguishing the type of the segment (master, ad, slate) for server-side ad stitched streams. - Error
LOAD010
is now thrown by the player to indicate that browser is blocking the third party cookies. - The event
AUTHORIZATION_STATUS
contains an additional parameter, the detailed error provided by the provider. - Player now performs a timeout check against Adobe Pass service failure / intential blocking. Time-out period is by default 60 seconds. This value can be overridden by setting the
timeOut
parameter with a value not less than 60 under accessControl namespace. - Error
ACTRL050
is introduced to indicate that Adobe Pass failed to respond within the specified time out limit. - Error
ACTRL052
is introduced to indicate that Adobe Pass failed to check authorization within the specified time out limit.
Version 2.136.8
- Error
ACTRL031
now includes the provider specific authorization failure message. - The bug related to the
pInstance
encountered while loading the player script along with others dynamically is fixed. - MRSS sent as resource to Comcast is modified to activate parental control.
- Player normalizes various formats of rating such as “TVPG”, “TV-PG” or “PG” including lowercases.
debug
embed parameter is now bound to the debug mode of Flash based Adobe Pass.- Meaures taken to decrease the latency while using Flash based Adobe Pass.
- New environments are deployed: Development, Staging and Production. Activating these environments are possible with the following settings:
- Development:
baseURL
must be set to “http://qa.up.anv.bz/dev/”, script source must be “http://qa.up.anv.bz/dev/scripts/anvload.js”. Custom Flash path must be written as absolute URL to includebaseURL
. - Staging: Script source must be “http://up.anv.bz/latest/scripts/anvload.js”. Custom Flash paths must be written as absolute URL.
- Production:
baseURL
must be set to _“http://up.anv.bz/{CLIENT_NAME}/”_, script source must be _“http://up.anv.bz/{CLIENT_NAME}/scripts/anvload.js”_. Custom Flash path must be written as absolute URL to includebaseURL
.
- Development:
Version 2.136.3
- Embed parameter
passive
is introduced for toggling on/offPASSIVE
state for preview. This parameter must be used underpreview
namespace. - Embed parameter
refreshless
is introduced for choosing between opening a new login tab/window and doing a full page redirection. This parameter must be used underaccessControl
namespace. - The latency issue encountered in Chrome/Webkit based browsers caused by Flash based Adobe Pass is resolved.
- The player now throws the error
ACTRL041
for the users with no service zip while switching to theENTITLEMENT
state.
Version 2.136.0
- Server-side ad stitching log corresponding to the session specified with
sessionId
is accessible withCtrl + Shift + F9
(AdditionallyFn
may be needed for keyboards defaulting to the multimedia options). - Error codes
ACTRL041
andACTRL042
are available for detailing the authorization failure due to the user’s TVE rights. - Flash based Adobe Pass support is now available in addition to the JavaScript based Adobe Pass support (default). Switching to the Flash based Adobe Pass is possible with
useFlash
embed parameter underaccessControl
namespace. - Embed parameter
environment
underaccessControl
namespace is introduced to select the Adobe Pass environment. Possible values are“staging”
and“production”
(default). - Comcast encrypted zip parsing is enabled.
Version 2.135.23
- API method
getPreviewState()
is introduced to retrieve the preview state (while the Temp Pass is activated) - Player’s merged configuration generated using all other configs mentioned in IFRAMED JS embed option is exposed with
anvp.{PLAYER_INSTANCE}.mergedConfig
- Option to inject the IFRAMED Provider Login to a custom HTML element is introduced. This option is activated by assigning the HTML element id to the
iFramedLoginPlaceholderId
property underaccessControl
object. The eventsPROVIDER_IFRAME_INJECTED
andPROVIDER_IFRAME_REMOVED
are also provided to notify the SDK user about the opportunity to display/hide the placeholder. - Ad Stitching session id
anvp.{PLAYER_INSTANCE}.sessionId
is introduced to facilitate Ad Ops debugging. - FreeWheel Ad Request URL used for server-side ad stitching is exposed with
anvp.{PLAYER_INSTANCE}.adRequest
Version 2.135.3
- Server-side FreeWheel configuration activated ,
- Embed parameter
accessKey
is introduced to accomplish the following tasks:- Enabling internal TVE services such as parental control, TVE Rights checking etc.
- Making use of a remote configuration to include parameters for common workflows such as preview feature (this minimizes the embed parameters),
- TVE API services activated to include:
- Remote config,
- Metadata lookup,
- Parental control based on metadata and
PROGRAM_CHANGED
event, - Geo-station control on every
PROGRAM_CHANGED
event
- Switch to PASSIVE mode on failed authZ is removed,
- Access Control Error Messages are introduced to provide more detailed information about entitlement failures,
- Further enhancements on bitrate switch.
Version 2.135.0
- IFramed login is activated for Adobe Pass,
- Transition to the preview state
ENTITLEMENT
is now occurring as a result of authorization check after a successful authentication, POPUP_BLOCKED
event is introduced to indicate a popup blocker (also starting to poll for pop-up),POPUP_DISPLAYED
event is introduced to indicate when a popup succeeded/popup unblocked,- Bitrate selection algorithm is improved to have a smaller delay before switching to the appropriate bitrate.
Version 2.134.0
defaultPicker
embed parameter is introduced for disabling the default MVDP picker,PICKER_REQUESTED
event is available for tracking the opportunity to display custom MVPD picker whendefaultPicker
is set to false,PICKER_DISPLAYED
event is available to notify that default MVPD picker is displayed.- The API method
setSelectedProvider()
is provided to be called from custom MVPD pickers.
Version 2.133.0
- Adobe Pass has been modified for refresh-less authN,
- Internal Temp Pass Flow has been implemented,
PREVIEW_STATUS
,PREVIEW_EXPIRED
andUSER_INTERACTION
events are introduced.triggerUserInteraction()
is available for triggering user interaction which may be used during preview states.