AMP - Frequently Asked Questions

Document created by Herberth Alvarado Employee on Dec 26, 2016Last modified by Herberth Alvarado Employee on May 9, 2017
Version 31Show Document
  • View in full screen mode

Maintainer: Herberth Alvarado

This document is part of Adaptive Media Player Web User Guide

For Flash questions check on: AMP - Frequently Asked Questions (Flash)

 

 

 

General information

What’s the browser compatibility of AMP?

 

My content provider requires DRM, do I need DRM or media encryption?

  • If the content is licensed from a production studio, sometimes they are required to be DRMed. Akamai also have a media encryption service which could be used instead. The list below can be used as a rule of thumb:
  • HD content requires DRM
  • HLS requires DRM + potentially a proprietary player (redvine, adobe access, playready)
  • HDS SD content is OK with media encryption + player verification

 

What types of DRM does AMP support?

  • AMP Web’s Flash mode supports Flash Access as do most OSMF based Flash players.
  • AMP Web's’s HTML5 mode uses dash-js, which will support Chrome/Widevine and IE/Playready.
  • AMP Devices iOS and Android SDK’s don’t yet support DRM.
  • Overall the message on DRM is : Flash Access is yes, others not yet but to be added by customer demand soon.

Regarding support on DRM for specific browsers or devices:

  • For Safari Mac: Automatic in HLS, or possibly via DASH via dash-js
  • For Chrome and IE : we’ll update our dash-js integration to support CENC Widevine and Playready.
  • For Firefox: TBD, as Firefox only supports Flash Access. Maybe your current content will work in that! Unsure  as the dash-js community had not tested this.
  • Note: Keep in mind here, that DRM in the browser is still young, but it is tested and working in large sites like Netflix and also in the dash-js community. So there may be bumps ahead, but we expect the CENC-Widevine and CENC-Playready to work well. We’ll work with the dash-js leadership community that is a part of Akamai for this.

 

How does AMP support DASH?

  • Dash in HTML5 is supported. We leverage the dash.js playback engine. To get the full fall back, specify the source array with HDS, DASH,  HLS, then PMD.  And separately you'll have to include mode: "html" when the browser is a MSE compatible browser like IE11 or chrome.

Why would we specify the source array with HDS, DASH, HLS, then PMD? when trying to support DASH?

  • The reason is the Flash player will always pick up the first format so it’s needed, and the HTML5 mode will know which ones it can or cannot do so that mode will skip flash.
  • AMP makes a two step decision:
    • what “mode” it should be in based on it’s own platform detect, and separately
    • which stream to play of the list, going from top to bottom. Since #1 is made first and without awareness of the stream list, its ok for HDS to be listed first.

 

How to embed the player in a full HTTPS page?

AMP - Deployment for share and SSL hosts  

 

Why do error messages differ on flash and HTML5 for the same error? Can we change it?

  • Currently, we expose the “platform-specific” error messages and make not attempt to smooth them over.
  • For now, one suggested idea is the most common approach customers take is listen to the error event with amp.addEventListener(“error”, errorHandler) and in this handler simply unhide/show an error slate that matches your desired branding.

 

How to embed AMP player in WordPress?

There is an issue with WordPress where they include an autoformating function that have been messing out with a lot of developers out there, this function add <p> tags on every space no matter if you use the text or visual editor.

 

You have to either

  1. take all the whitespace out of the script so WordPress does not add <p> tags and then the JS will work, or
  2. disable autop in the post editor for all posts/pages (see Function Reference/wpautop « WordPress Codex ) so WordPress doesn't add paragraph breaks, or
  3. do the following, which leaves autop enabled globally, but lets you disable it with and tags in individual posts and pages.

 

Add the function below to functions.php and use the two tags

<!-- noformat on --> and <!-- noformat off -->

 

in your page/post editor, i.e.

 

text will be rendered *with* autop

<!-- noformat on -->

text will be rendered *without* autop

<!-- noformat off -->

text will be rendered *with* autop

 

Content outside of the two format tags will have autop enabled, as noted.

Add to functions.php of the theme:

// <!-- noformat on --> and <!-- noformat off --> functions

 

function newautop($text)

{

$newtext = "";

$pos = 0;

 

$tags = array('<!-- noformat on -->', '<!-- noformat off -->');

$status = 0;

 

while (!(($newpos = strpos($text, $tags[$status], $pos)) === FALSE))

{

        $sub = substr($text, $pos, $newpos-$pos);

 

        if ($status)

            $newtext .= $sub;

        else

            $newtext .= convert_chars(wptexturize(wpautop($sub))); //Apply both functions (faster)

 

        $pos = $newpos+strlen($tags[$status]);

 

$status = $status?0:1;

}

 

$sub = substr($text, $pos, strlen($text)-$pos);

 

if ($status)

        $newtext .= $sub;

else

        $newtext .= convert_chars(wptexturize(wpautop($sub))); //Apply both functions (faster)

 

//To remove the tags

$newtext = str_replace($tags[0], "", $newtext);

$newtext = str_replace($tags[1], "", $newtext);

 

return $newtext;

}

 

function newtexturize($text)

{

return $text;

}

 

function new_convert_chars($text)

{

return $text;

}

 

remove_filter('the_content', 'wpautop');

add_filter('the_content', 'newautop');

 

remove_filter('the_content', 'wptexturize');

add_filter('the_content', 'newtexturize');

 

remove_filter('the_content', 'convert_chars');

add_filter('the_content', 'new_convert_chars');

 

What I did was the 2 approach, where I add these lines on my theme's functions.php:

remove_filter( 'the_content', 'wpautop' );

remove_filter( 'the_excerpt', 'wpautop' );

 

I upload the AMP & resources folder to my web server at the same level I have my WordPress files, doesn’t matter where you put it while while you make the reference correctly once you call the player:

 

Now when I call the player I can just include the code I need in using the wordPress text editor.

And this is the code you need to call the player:

 

<!--Player Start—>

<div style="height:265px" id="akamai-media-player"></div>

<script type="text/javascript" src="/amp/amp.min.js"></script>

<script type="text/javascript">

var amp;

var config = {

paths:{

player:"/amp/",

resources:"/resources/"

},

autoplay : true,

media:{

title:"VOD Sample",

poster:'/resources/images/hd_world.jpg',

source:[{

src:"http://multiplatform-f.akamaihd.net/z/multi/april11/hdworld/hdworld_,512x288_450_b,640x360_700_b,768x432_1000_b,1024x576_1400_m,1280x720_1900_m,1280x720_2500_m,1280x720_3500_m,.mp4.csmil/manifest.f4m",

type:"video/f4m"

},{

src:"http://multiplatform-f.akamaihd.net/i/multi/april11/hdworld/hdworld_,512x288_450_b,640x360_700_b,768x432_1000_b,1024x576_1400_m,1280x720_1900_m,1280x720_2500_m,1280x720_3500_m,.mp4.csmil/master.m3u8",

type:"application/x-mpegURL"

}]

}

};

amp = akamai.amp.AMP.create("akamai-media-player", config);

</script>

<!-- Player End -->

Where:

Size for the player

Location of amp.min.js file

Paths for the amp & resources folders

Video sources you want to play

 

Why autoplay doesn’t work on mobile devices?

Autoplay will not work on the 1st video on mobile devices by design, it’s enforced on the OS. The later videos sequenced will autoplay.

In other words, this is due to a limitation in the mobile OSes, Mobile devices won't auto start for the first video played in splatter instance. Subsequent videos though will.

For example the second video in the gallery is clicked on and setMedia() is used to set that video into pre-existing player instance, then that second will autoplay as long as autoplay is set to true.

 

With HTML5 is possible to have multiple AMP player instances working with Media Analytics?

After some investigation we found some limitations from the plugin of Media Analytics. MA does not support several instances of a player at the same time on HTML5 mode, however this will be fixed on the future months. If you want to work with several instances of the player and MA the current workaround is to work with different a iframe for each player.

 

What options can I use to control/force/modify AMP behavior from the query string?

There is a few options to manage how AMP executes. These options can help to troubleshoot issues, remember to not deploy them in production.

 

Option
Quick description
Where to find more info

amp-debug

This option enables the logs on the console if it is set to 'true'.https://community.akamai.com/docs/DOC-5518#jive_content_id_AMP_Logs

amp-flash-log

Setting this option to 'true' will get you the logs from flash. This option is only valid if amp-debug is set to 'true' too.https://community.akamai.com/docs/DOC-5518#jive_content_id_Flash_logs_

amp-mode

With this option, the way how streams are played can be forced.AMP - Player Mode & Stream selection

 

akamaianalytics_debug

Setting this option to '1' will get you the logs from Media Analytics.https://community.akamai.com/docs/DOC-5518#jive_content_id_Analytics

 

 

What content type is the correct for the different types of streams supported by AMP?

 

Stream type
Content type
HLSapplication/x-mpegURL
HDSvideo/f4m
MP4video/mp4
DASHapplication/dash+xml
RTMPvideo/f4m
Octoshape

 

What mime types are supported by AMP Web?

 

Below you can find the mime types supported:

  mp4: "video/mp4",

  flv: "video/x-flv",

  f4m: "video/f4m",

  smil: "application/smil",

  smilxml: "application/smil+xml",

  m3u8: "application/x-mpegURL",

  mp3: "audio/mpeg",

  webm: "video/webm",

  mpd: "application/dash+xml",

 

And these are for captions in case you need them:

  vtt: "text/vtt",

  ttml: "application/ttml+xml",

  srt: "application/x-subrip",

  cea608: "text/cea-608",

  cea708: "text/cea-708"

 

 

Does AMP have any functionality that will change the aspect ratio of a video of a stream?

No, AMP will always retain the aspect ratio of the video.

 

Which are the best practices for multiple videos in single page?

  • Most common in on a gallery page to allow only one video to play at a time.
  • For HTML5 on mobile, iOS (and I think Android) only allow one at a time, so playing a second player will automatically pause the other.
  • For HTML5 on desktop, I don’t think there are built in limits.

 

What canplaytype return when the player can’t play the source?

It returns an empty string.

 

Does HLS supports tokenized URL?

In any case, recent versions of AMP (since 4.37 in December 2015) have HLS support in HTML5 mode for all modern browsers.
Our HLS plugin uses a newly popular open source library to power HLS playback for non-Safari desktop browsers.
See the sample here:
http://projects.mediadev.edgesuite.net/customers/akamai/mdt-html5-core/standard/4.46.0.0001/samples/hls.html?amp-debug=true&amp-mode=html
So for a non-Flash usage of AMP, you’d do this:

  • Use a recent AMP (4.40 will work, 4.46 is recommended
  • Include the HLS plugin in the config overrides
  • Set the mode to “html-auto” for HMTL5 FIRST, or more relevant for this scenario is to set it to “html” to force HTML5 ONLY.

{

    mode: "html"

}

  • Also note: For Token protected content, you’ll need to modify one line inside resources/js/hls.js, which is to add this line "xhr.withCredentials = true;” prior to "xjr.send()". In newer versions you just need the following option in the HLS node:

{

   withCredentials: true

}

 AMP - Samples - XHR With Credentials 

 

General configuration

 

How to turns on MAE for HLS in AMP?

Add the lines in bold to the HLS block:

hls: {

  resources: [

    { type: "text/javascript", src: "#{paths.resources}js/hls.js" },

    { type: "text/javascript", src: "https://media-acceleration.akamai.com/sdk/js/1.2.2/hlsjs.min.js" }

  ],

  mae: {}, // turns on Media Acceleration from player side

  quality: { startLevel: 1}

}

 

How to let the player know that content has changed in a live stream so the analytics are correct?

  • use amp.recordContentChange(JSONobject) to pass in a json object with the new title, description etc.

 

Why do I need to add CORS headers?

Javascript (HLS) uses CORS headers to see if OK to read files from a domain. 

For CORS, the access-control-allow-origin in directive should be present in the web server as *

 

 

When in the middle (or end) of the playback, the stream is requested again, but the tokens are expired, because they have a short lifespan, how can the player deal with it?

config:{

                media : {

                                                title : "",

...                        

                                                 status: {

                                                             // this tells the player the media needs to be authorized

                                                             state: "blocked"

                                                }

                }

}

How to play audio only streams in the page on iphone (instead of using the native player which will give a black screen)?

  • Please include: ‘medium: “audio” ‘ in your feed, which will cause the player to use the <audio> tag instead of the <video> tag in HTML mode.

 

How to force the player into a particular mode?

  • mode: “auto” to allow it to select
  • mode: "flash" to force flash
  • mode: “html” to force html5 mode
  • mode: "html-auto" will go to HTML5 except in Firefox 41 and below and IE8,9,10 any Win or IE11 on Win7

 

How to remove the volume button for Android?

  • Best to do it in config override like this: var config = { volumepanel: { enabled: !(/Android [4-9]/.test(navigator.userAgent))} };
  • But it’s also possible to create a rule in the CSS to remove the button based on the user agent string.

 

How does the HTML5 mode works?

AMP has robust HTML5 mode. To put player in html5 mode, add to the embed config overrides:

{
mode: "html"
}

 

or for convenience in testing

?amp-mode=html in the URL.

 

Normally, it’s “auto” and auto will go to Flash for most desktops and html5 when no flash or on mobile.

We do have many customers doing this also, but keep in mind you should be sure to provide a full set of formats to cover HTML5 mode well. This would mean HLS and MP4, HDS for the few times you’d still want Flash, and DASH if you are adopting newer standards and have a workflow that provides DASH. Also, if your focus is live, then MP4 won’t cut it.

 

Here is a sample forcing HTML5 mode we are working on another customer with.

 

Also, IE8,9,10 are NOT supported by HTML5 mode due to bad video tag in IE.

 

Edit: on Versions above 34, you can override the amp-mode query parameter in the config file as follow:

var config = {

    mode : {auto|html|flash|html-auto}

}

 

How to setup a failover stream for live media?

  • For live streams, you can take advantage of Akamai’s ability to have a primary and backup encoder for any stream which automatically failover between each other. If you’re setting up a failover stream with another set of encoders, then you can do the following:
  • This works only in flash and  would require using a feed object, please refer to this or any premier build examples.
  • In the feed object, please add a failover URL like this:

{   

    "@attributes" : {     

          "isDefault" : "true",

        "url" : "<main_stream_url>",

        "failover" : “<failover_stream_url>",

        "type" : "video/f4m",

          "medium" : "video",

        "duration" : "1000000000"

    }

},

 

How to include multiple CSS files for player?

  • List the css files in the config file in the same block like this:

<links type="Array">

    <link type="String">../amp.premier/amp.premier.css</link>

    <link type="String">../amp.premier/amp.premier.extra.css</link>

</links>

 

What's the parameter to delay control bar hide?

  • autoHideDelay in both Standard and Premier

 

I want to force the use of DASH when find a compatible browser?

  • Normally, the mode of the player is “auto” which means AMP will use it’s default approach…..which is to do Flash on desktops and HTML5 when Flash not available or on mobile. Since you want an HTML5-first even on desktops approach, you’ll have to influence that  based on user agent.
  • So your logic should be to add to the embed overrides mode: “html" when user agent is IE11 or Chrome (or Safari on Yosemite but worry about that later), and other wise let AMP to it’s thing. This should get you what you are looking for.
  • This is not exactly it, but very close, check this out: (Another example someone out together in Akamai)

 

How to enable DASH support on Firefox?

  • First write in the URL field of Firefox browser : "about:config"

          Screen Shot 2015-08-07 at 12.21.42 PM.png

  • Then search for the variable:

          Screen Shot 2015-08-07 at 12.23.03 PM.png

  • Finally double click this variable and change it from value true to false.

 

How to setup new styles setup of captions on HTML5 player?

amp.captioning.changeSettings(<Object>)

 

To change the caption style and should be used on AMP player after the player has been created (when the ready event is dispatched).

 

Availability: AMP Flash and HTML

 

<Object>:

{

   'visible':false ,

   'fontFamily':'Monospaced Serif',

   'fontSize': 'small',

   'edgeType': ‘Depressed’,

   'fontColor': 'rgba(255,255,255,1)',

   'backgroundColor': 'rgba(02,0,0,1)',

   'windowColor': 'rgba(0,0,0,0.5)',

    'edgeColor':'rgba(250, 250, 0, 1)',

   'scroll': 'rgba(0,0,0,0.5)'

}

User can send any of the key value pairs listed above in any order.

 

  • visible: parameter holds a Boolean value to show or hide captions (optional)
  • fontFamily: can hold any of the values mentioned below
    • "Monospaced Serif”

    • "Proportional Serif"

    • "Monospaced Sans-Serif"

    • "Proportional Sans-Serif"

    • "Casual"

    • "Cursive"

    • "Small Capitals"

    • "Default" – (available only in flash player and effective only for uplynk caption)


which applies to the respective set of fonts listed below.

    • HTML Default font list
      • [Monospaced Serif] Courier New, Courier, Nimbus Mono L, Cutive Mono, monospace

      • [Proportional Serif] Times New Roman, Times, Georgia, Cambria, PT Serif Caption, serif

      • [Monospaced Sans-Serif] Deja Vu Sans Mono, Lucida Console, Monaco, Consolas, PT Mono, monospace

      • [Proportional Sans-Serif] Roboto, Arial Unicode Ms, Arial, Helvetica, Verdana, PT Sans Caption, sans-serif

      • [Casual] Comic Sans MS, Impact, Handlee, fantasy

      • [Cursive] Monotype Corsiva, URW Chancery L, Apple Chancery, Dancing Script, cursive

      • [Small Capitals] Arial Unicode Ms, Arial, Helvetica, Verdana, Marcellus SC, sans-serif, font-variant: small-caps

  • fontSize: can hold any of the values below and is case-insensitive  (passing any other values than the items listed below will not have any effect)

    • small

    • medium

    • large

  • edgeType: can hold any of the values below and is case-insensitive (passing any value other than the items listed below will not have any effect)
    • None

    • Depressed

    • Left Drop Shadow

    • Right Drop Shadow

    • Raised

    • Uniform

Note: For uplynk caption either “Left Drop Shadow” or “Right Drop Shadow” can be used for “Drop Shadow”

 

  • scroll: can hold any of the values below and is case-insensitive (passing any other values than the items listed below will not have any effect)
    • Pop-Out

    • Roll-On

    • Paint-On

Note: Scroll is not applicable for uplynk caption as it is not user driven. Need to update this section for Adobe CC

 

  • fontColor: Must contain values in rgba format only (Ex: rgba(0,0,0,1) or rgba(255,255,255,0.5) )
  • backgroundColor: Must contain values in rgba format only (Ex: rgba(0,0,0,1) or rgba(255,255,255,0.5) )
  • windowColor: Must contain values in rgba format only (Ex: rgba(0,0,0,1) or rgba(255,255,255,0.5) )

 

amp.getMediaElement().setPlayerProperty((“captionSettingsUI”,<Object>)

 

Note: amp in the API refers to the AMP player instance which is returned on creating the player instance in JS

amp = akamai.amp.AMP.create("akamai-media-player", config, readyHandler);

 

 

For HTML: you need to edit the akamai-branding.akamai-overlay and akamai-branding-container clases in the amp.premier.css.


 

How to remove Akamai logo or add my own logo to the upper right video screen?

To turn off the Akamai center logo or add your own just add the snippet below to your config variable call

branding : {

   logo : "PATH TO LOGO | EMPTY"

},

 

Why are the buttons not showing in HTML mode?

Please make sure that amp.svg is being served properly with the correct MIME type of “image/svg+xml”

 

How to make the caption button to appear in HTML5 player?

In order to show the caption button in HTML5 player you need to add the captioning component in the javascript used to call the player:

captioning:{
      enabled: true
},


code[1].png

 

How to remove the caption button in HTML5 player?

To remove caption button from the HTML5 player just set "enabled": false in the javascript used to call the player.

 

How to remove the big play button?

Add

playoverlay: { enabled: true }

in config override.

 

How to set autoplay?

Use amp.setAutoPlay(true) method

  • Note this will be remembered for subsequent pages

 

How to hide the video controls in initial load of the page/player and reestablish its behavior once user clicks on play?

Initialize the amp instance using controls: “none” that way the control bar will be disabled, then if you want this just in mobile, I recommend you to use our utils library. For example

var config = {
    controls : {

        mode: akamai.amp.utils.Utils.isIOS() || akamai.amp.utils.Utils.isAndroid() ?  “none” : “auto"

    }
    …

}

Or via in the ready handler:

If ( akamai.amp.utils.Utils.isIOS() || akamai.amp.utils.Utils.isAndroid() ) {
    yourAmpIntance.controls.setMode(“none”);
}

To return back the control bar set a listener for the "play" event.

amp.addEventListener( “play", function(){ yourAmpIntance.controls.setMode(“auto”) } );

 

How to set an initial quality level (bitrate) when using hls.js?

 

-1 is auto, but 0 is lowest, 1 is second lowest, etc

 

hls: {

  resources: [

    {type: "text/javascript", src: "#{paths.resources}js/hls.js"}

  ],

quality: {  startLevel: -1  },

  data: {

       enableWorker : true,

       enableSoftwareAES: true

  }

}

 

How to force the use of hls.js in Android Firefox?

To force hls.js in some specific platform or browser you can use the piece of configuration in black, and just adjust the "if" statement RegEx, which matches with the browser's User Agent.

autoplay : true,

getPlaybackOrder : function (order) {
         if (/.*Android.*Firefox/.test(navigator.userAgent))
                     return ["hls", "dash", "dvr", "default", "audio"]
},

media : {

......

}

 

 

Events

How to listen to volume change events?

The recommended way would be event.player.getVolume(), and this would work across both Flash and HTML5 modes.

 

How to listen for buffering timeout event?

This is only available in flash.

 

How to add advertising component event listeners?

After the AMP instance is created, you can add advertising component event listeners as follows.

amp.ads.addEventListener("eventName", method);

 

 

How to listen to quartile events for ads?

  • amp.ads.addEventListener(“firstquartile”, handler);
  • amp.ads.addEventListener(“midpoint”, handler);
  • amp.ads.addEventListener(“thirdquartile”, handler);

 

 

How to interact with the player

How to determine what mode the player is in so we know rather than have to wait for the ready event before setting the media?

  • Basically there are two options for this:

1.) Use the static utility function: akamai.amp.utils.Utils.getPlaybackMode()

2.) Use the player api: amp.getConfig().mode

 

How to control the video/audio tag when the player is in HTML mode?

  • The player provides the full access to the tag via .getVideo() method:
  • amp.getMediaElement().playbackRate=x

 

How to force live stream to stay at the live point even if DVR is enabled in the streaming config?

  • Make sure that you have an event handler for AMP’s error event. That will be amp.addEventListener(“error”, handler).
  • When you receive an error, you will want to check for an error ID of 50, which indicates an error of type ARCHIVE_PLAYBACK_DISALLOWED.
  • Use the method below to skip to live.

 

How to create a playlist?

  • AMP doesn’t have a built in playlist support. What the customer can do is to provide a pseudo playlist in the form of JS array(in AMP standard) OR an array of feeds (AMP premier), then create event listeners to start or transition to the next video (when the current one ends). Please refer to the “Advanced” examples in the respective distribution, please note in those, the auto advance is not implemented but it’s only 1 line extra to the “endedHandler” to call “loadVIdeo()”

Update, this option is yet not buit-in, but we have now a sample

 

How to extract/verify the feed object from the player?

  • amp.feed.getData()


How to control fullscreen via API?

API methods:

 

  • amp.enterFullScreen
  • amp.exitFullScreen

 

How to enable a going fullscreen with a key stroke?

amp.addEventListener(“mediaPlayerKeyPress”, keyHandler)

 

function keyHandler(event)

{

   if(event.data.type == "keyUp" && event.data.key == 70)

   {

      amp.enterFullScreen();

   }

}

 

How to turn on/off ads after the player is initialized?

Use for this:

amp.ads.setEnabled(true | false)

 

You just need to make sure you issue the instruction prior to the ad request for a given media item, which is executed immediately prior to video playback initialization. You can also invalidate a portion of your ad tag URL using a binding that provides an invalid value at the right time, that would force DFP to return an empty VAST response.

 

How to add a custom endslate?

Creating a div overlay is a standard HTML practice and many examples can be found online.

 

How to display custom error messages?

Add errorhandler in the ready handler

function readyHandler(event)

{

        amp.addEventListener("ended", endedHandler);

        amp.addEventListener("error", errorHandler);

}

  

function errorHandler(event)

{

    document.getElementById("error-overlay-text").innerHTML = "We're sorry. Looks like something went wrong. Please refresh your browser.";

    document.getElementById("error-overlay").style.display = "block";

    document.getElementById("akamai-media-player").style.display = "none";

}

 

Here is the CSS for the error overlay styles

<style type="text/css">

.error-overlay

{

display:none;

position: relative;

width:100%;

height: 100%;

background-color: #262b31;

}

 

.error-overlay-img

{

margin: 135px 38% 20px 38%;

cursor: pointer

}

 

.error-overlay-text

{

display: block;

text-align: center;

color: #d7d7d7;

font-size: 14px;

font-family: Antenna Medium, sans-serif;

}

</style>


Here is the error overlay in the page

<div id="error-overlay" class="error-overlay">

<img class="error-overlay-img" onclick="reloadPage()" src="../resources/images/refresh_icon.png" />

<span id="error-overlay-text" class="error-overlay-text"></span>

</div>

<div id="akamai-media-player"></div>

 

How to make control bar persistent?

amp.controls.setMode(“persistent”)

 

How to extract or monitor the change in size of the media?

add amp.addEventlistener("mediaPlayerMediaSizeChange", handler);

 

How to show the poster during the media load (with the spinners)?

The work around is to statically initiate the player (without any media object) and listen to the ready event, then use setMedia() method to seed the player. Please see the menu.html example for setMedia() samples.

 

How to access the auto play value?

Use amp.getAutoPlay() method

 

How to prompt the user if they’re still watching and destroy the window if no response?

We have a sample for that specific case, AMP Premier - Samples - Inactivity

 

Does the player have a "Share" option that we display when a video is playing or to post on Social Networks?

Look for detailed information here: AMP - Social Media Sharing

 

How to embed AMP in Twitter and Facebook?

Look for detailed information here: AMP - Social Media Sharing

 

How to manually select a start up bitrate?

You can specify which bitrate the player starts with the "startLevel: -1" tag in the config.

  • -1 means auto
  • 0 means the lowest bitrate
  • 1 is the second bitrate etc.

 

 

Close Captions

How to turn on captions using JavaScript?

You can use:

amp.captioning.setHidden(false) /to show the captions

amp.captioning.setHidden(true) /to hide the captions

 

How to get captioning to work on iOS for VOD content?

Most broadcasting customers of our are doing both DFXP  (TTML DFXP file) AND 608 (embedded into h264 SEI in the media files). 608 is a broadcast standard for captions that carries over pre-internet captions into the new world.

 

Since iOS devices don’t allow overlays in fullscreen, this embedded 608 handle the full-screen scenarios.

 

Right now, we can offer the JS-injected workaround to get WebVTT to allow iOS to grab those for full screen since you would likely not have 608 embedding:

  • iPhone (and ipad in fullscreen) will take over the playback and only currently support webVTT. AMP as of v.15 does not support webVTT yet, so the current workaround is to add the captions via JS:

var video = amp.getMediaElement();

video.addEventListener("loadedmetadata", function() { 

    var track = document.createElement("track"); 

    track.kind = "captions";

    track.label = "English"; 

    track.srclang = "en"; 

    track.src = "captions/sintel-en.vtt"; 

    track.addEventListener("load", function() {     

          this.mode = "showing";     

          video.textTracks[0].mode = "showing"; // thanks Firefox 

    }); 

    this.appendChild(track);

});

Do you have a test stream for 608/708 captions implementation for live stream?

 

 

Analytics

How to configure and event map Comscore?

Comscore can be configured with AMP to perform its standard tracking relevant to a subset of video and ad playback events. To configure and enable Comscore, include a configuration node in your AMP JavaScript level configuration overrides. For examples you can take a look at AMP - Analytics

 

In order for tracking to occur, you must specify one or more supported events which trigger a Comscore tracking request.

 

Note that the events depicted in AMP - Analytics  Comscore and Comscore Streamsense are all those which are currently supported.  Also note that "started" events are tracked when the recordContentChange API is used. Another sample of JavaScript level configuration overrides:

var config_overrides = {

    comscore: {

        url: "http://b.scorecardresearch.com/b",

        data: {

            c1: 1,

            c2: "11111111",

            c3: "NAME-EXAMPLE",

            c4: "#{media.metadata[‘feed-binding-example'].name}",

            c5: "",

            c6: "#{global-binding-example}",

            c10: "CATEGORY-EXAMPLE"

        },

        events: {

            ads: [{

                    type: "started",

                    data: {

                        c5: "example-1"

                    }

                ],

                video: [{

                    type: "started",

                    data: {

                        c5: "#{(media.duration < 300) ? 'example-1' : 'example-2'}"

                    }

                }]

            }

        }

    }

}

 

How to Enable/Disable Server IP Lookup?

By default, Server IP lookup is always turned on. To turn off the feature, you will need to call the following API on the player ready event:

function readyHandler() {
   akamaiDisableServerIpLookup();
}

 

And add a parameter in the creation of the player:

amp = akamai.amp.AMP.create("akamai-media-player", config, readyHandler);

 

To enable it once again, call the following:

akamaiEnableServerIpLookup();

 

Note: The akamaiEnableServerIpLookup() API must be called only after the akamaiDisableServerIpLookup() call.

 

In the following link you can find the info mentioned above:
https://control.akamai.com/dl/customers/PERF/MediaAnalytics/PluginIntegrationGuides/HTML5_MSE.pdf

 

Advertising

Why doesn’t skip ads button show up on iphone?

  • it’s not possible in a web based player since iPhone does not allow overlays over the video on that specific device

 

How to make ads fullscreen on iOS devices?

  • Unfortunately iOS devices will go native once fullscreen is triggered, which means that there can be no HTML overlay, which is the method IMA uses to display ads on top of the actual video.
  • The best way to overcome this problem is not to do a fullscreen but make the div the same size as the browser. You’d have to pass through the fullscreen button action and create your own JS code to resize the div.
  • Sample: AMP Premier - Samples - VOD

 

How to implement a separate ad tag for each video?

  • If the ad provider is the same across all videos, then we recommend using parameters within the player configuration (or override) for the ad tag.
  • However if videos will have different ad providers. It is possible to construct the ad tag dynamically using functions without having to destroy and recreate the player instance. It is possible to do something like this:

ima: {

    adTagUrl: "#{amp.getMedia().link}",

}

 

What this does is to use the media.link object as an adTag upon loading of the video. In general #{} will cause the enclosed function to be executed.

 

How should an ad break point look like in a live stream?

here's an example of what a valid payload for this format would look like for a midroll trigger:

data
{
   name: "AdMarker",
   time: <number>,
   type: "event”,
   parameters: {
      AdOut: "1"
      DurationMsec:70000TimeMsec:85445710BreakID:0x1000175b
   }
}

 

The payload passes two rounds of validation. The first requires all the fields above. The second round of validation is when we inspect it for meeting the signature of an ad marker. Please make sure 1) the key for the value "AdMarker" should be "name" (instead of for example "event name”) and 2) the "AdOut" parameter on your payload is within an object with the key "parameters".

 

Another quirk is that "AdOut" and "AdIn" are the reverse of what one would logically think. "AdOut" triggers an attempt to invoke whoever the ad partner is for midrolls. "AdIn" will actually terminate ad playback. In fact, the only time we expect to receive an "AdIn" cue point is when ad playback must be terminated. In this workflow, it is meant for the ad component (in this case DFP's IMA SDK) to incur the responsibility of ending ad playback using an event to which our player will respond.

 

The explanation for the “BreakID” and DurationMsec:

  • If the first Hex digit is a 1 “0x1” then then start ad break National
  • If the first Hex digit is a 2 “0x2” then then start ad break is Local
  • If the first Hex digit is anything else “0x5” the the cue is a ‘return to programming’ immediately, kill any playing ads
  • DurationMsec:100000 (duration of ad break in msec for us to tell the ad provider in the ad call)

 

Why is the fullscreen button not working during ads?

  • This is by design. To work around this, you can potentially set the full screen button to  external action, and listen to the event, then full screen the DIV.

 

How to enable/disable ads dynamically?

Use amp.ads.setEnabled(true|false) method.

 

Why player control is preventing engagement with VPAID ads?

Background on VPAID Challenges:

 

With VPAID there are two main issues at tension.

  1. Some creatives do bad things, so we’ve been asked to make sure we never lose the control bar so the ad can’t take over the player, BUT
  2. Some creatives (like this one) have control within them that appear close to the edge, so the appearance of the control bar overlaps those controls!

 

So our default approach has been to allow the control to be appear during mouseover so long as the ad is not blocking the input. But this also means that a  creative is going to block mouse and prevent controls bar from knowing to appear, then it should provide its own pause/play and volume controls within the ad.

 

Now this case for this issue you brought up is yet another variation…..there are interactive controls for the ad but the control bar overlaps them. Due to rule #1 above, we can't get rid of the control bar.

 

    Proposed Option

So finally that brings me to the other facility we offer, and that is an “autofit” option. When VPAID (interactive) ads are detected as the ad type from the DFP plugin, we will “downsize” the ad area when the control bar is on the screen. This reduces the ad space and introduces some letterboxing, but it retains full interactivity with the internal ad controls.

 

There was a recent period of time between December and January this was the default in our player, and no one had said anything negative that we know of. However, we changes this so it is no longer default due to complaints. So if you “opt in” to autofit, you can have this behavior (Simple config option on our side)

 

    Alternative Option

You could add JS in your page to detect the ad id in from the ad metadata and hide the controls during such as with amp.controls.setMode(“none”) during the ad.

 

How does companion ads work in AMP?

You can turn on/off companions in the config

 

disableCompanionAds: false|true,

 

How to use variables in the ad tag or reporting?

There is page specific for that question,AMP - Parameterization or Binding

 

Does each video need a unique ad ID?

The basic idea is you’d had the ads setup on your Doubleclick service and schedule them that way.

You’d pass the video id into the ad call from the player. Player has facilities for that.

 

 

Contacts

How to contact the Web AMP or Devices AMP teams?

To reach Web AMP team directly with any questions, please contact amp-support@akamai.com if what you need is to contact the Devices AMP team use amp-sdk-support@akamai.com

Attachments

    Outcomes