AMP - Upgrade Notes

Document created by B-3-ZIK1FH Employee on Apr 19, 2016Last modified by Herberth Alvarado on Jan 26, 2017
Version 5Show Document
  • View in full screen mode

Maintainers: Julio Marin & Maverick Chacon Garro


Summary of Changes for X.46+ Overview

This document summarizes the changes in AMP for Web Standard 4.46+ and AMP for Web Premier 2.46+. It is intended to highlight functional and technical changes for customers who are upgrading from an earlier version.


Summary of Changes

  • AEPC-992: ABCTV: Freewheel: Flash: Ad count ("n of n") is off in Freewheel with ABCTV ads
  • HTML-867: FoxNews: HTML5: HTML-AUTO Mode / Modify validation for IE 11 Win 7 & 8.0
  • AEPC-943: OWN: Flash: Add 'click' event when user clicks on FW Ad
  • HTML-735: Weather,others: HTML5: For Safari, expose inline 608/708 (text/cea-608) captions to being enabled/disabled via AMP UI and API
  • HTML-789:Sportube: HTML5: Add support for live client side midroll via API (IMA3 only)
  • AEPC-918: ABCTV: Connect Uplynk caption events to existing caption framework
  • AEPC-955: ABCTV: Flash: Initial preloader animation does not use configuration element
  • HTML-861: Samples page: Should all samples page have link pointing xml or json
  • AEPC-965: ABCTV: Evaluate Freewheel requirements for existing support
  • AEPC-967: ABCTV: Flash: Freewheel: Some ABCTV ads block mouse input
  • AEPC-968: ABCTV: Flash: Freewheel: Toggle state of play button is incorrect during midrolls
  • AEPC-936: Octoshape: Integrate Octoshape ESI samples into AMP wrapper
  • HTML-862: WebMD: HTML5: Implment click-to-pause in video area like AMP Flash, Youtube
  • AEPC-974: ABCTV: Freewheel: Investigate "Integral Ads" implementation
  • HTML-871: HTML5: Captions: Add WebVTT captions rendering support for non safari (Note: On Demand webvtt file only)
  • AEPC-983: (DUPE) HTML5: Captioning: Add support for type "text/cea-608" for internal 608/oncaptioninfo paths
  • HTML-873: HTML5: Captions: Add WebVTT sidecar captions for Safari via track creation (Note: On Demand webvtt file only)
  • AEPC-987: ABCTV: AMP: OSMF Proxy runtime error (FLASHPLR-400)
  • AEPC-988: ABCTV Flash: AMP: Freewheel click event not observed (FLASHPLR-433)
  • HTML-878: ABCTV HTML: Clone "loadingView" config view node as string in flashvar.
  • AEPC-985: ABCTV: Freewheel: Flash: "creativeParameter: object is not present on the IMPRESSION events
  • HTML-875: HTML5: Captions: Move Caption Settings Menu into its' own Mediator
  • HTML-876: JS Error stopping loading of player
  • AEPC-989: ABCTV: adComponentBreakComplete comes twice (FLASHPLR-439)
  • HTML-887: HTML5: Caption Settings UI , ON /OFF Button state change
  • HTML-872: Weather,others: HTML5: Captions: For hls.js, expose inline 608/708 (text/cea-608) captions to being enabled/disabled via AMP UI and API
  • HTML-888: ABCNews: HTML5: Player object is not being bound it


IMPORTANT: Configuration File Format Changes

Since version 3.31 the follow changes have been done in the configuration of flash (config.xml/amp.xml):

  • Plugins not loaded on config.xml: now they are integrated on the amp.js/amp.premier.js
  • View node is an individual tag object: it has to be included inside flash object, and inside it are attributes tag and elements tag.
  • Paths node: to make easily change the paths references on the whole project.

Please notice this changes below on red:


<?xml version="1.0" encoding="UTF-8"?>

<config type="Object">

   <paths type="Object">

      <player type="String">../amp.premier/</player>

      <resources type="String">../resources/</resources>


   <resources type="Array">

      <resource type="Object">

         <src type="String">#{paths.player}amp.premier.css</src>

         <type type="String">text/css</type>



   <autoplay type="Boolean">false</autoplay>

   <fullscreen type="Object">

      <enabled type="Boolean">true</enabled>

      <native type="Boolean">true</native>


   <controls type="Object">

      <mode type="String">auto</mode>


   <captioning type="Object" />

   <playoverlay type="Object" />

   <flash type="Object">

      <swf type="String">#{paths.player}AkamaiPremierPlayer.swf</swf>

      <debug type="String">#{paths.player}AkamaiPremierPlayer-debug.swf</debug>

      <expressInstallSWF type="String">#{paths.player}playerProductInstall.swf</expressInstallSWF>

      <!--plugins section removed-->

      <view type="Object">

         <attributes type="Object">

            <skin type="String">#{paths.player}premier.assets.swf</skin>


         <elements type="Object">

            <captionDisplay type="Object">

               <attributes type="Object">

                  <initState type="String">cookie|off</initState>

                  <position type="String">relative</position>


                      bottom: 0px;


                      windowOpacity:0; font:Arial;











                  <settingsEnabled type="String">true</settingsEnabled>



            <controls type="Object">

               <attributes type="Object">

                  <height type="String">25</height>

                  <autoHide type="String">5</autoHide>


               <elements type="Object">

                  <captionBtn type="Object">

                     <attributes type="Object">

                        <style type="String">right: 8px;</style>



                  <fullscreenBtn type="Object" />

                  <loadedBar type="Object">

                     <attributes type="Object">

                        <style type="String">background: linear-gradient(90deg, #00FF00, #1B1B1B);</style>



                  <playPauseBtn type="Object" />

                  <progressBar type="Object">

                     <attributes type="Object">

                        <style type="String">background: linear-gradient(90deg, #FF0000, #1B1B1B);</style>



                  <rewindBtn type="Object" />

                  <scrubBar type="Object">

                     <attributes type="Object">

                        <style type="String">height: 18px;</style>



                  <streamTimeIndicator type="Object">

                     <elements type="Object">

                        <streamDuration type="Object" />

                        <streamTime type="Object" />



                  <liveIndicator type="Object" />

                  <goLiveBtn type="Object" />

                  <timeLocationIndicator type="Object" />

                  <volumeBar type="Object">

                     <attributes type="Object">

                        <color type="String">#CA4CAD</color>



                  <volumeBtn type="Object" />





      <xml><![CDATA[<?xml version="1.0" encoding="UTF-8"?>


       <player core_player_name="amp-premier-player" volume=".75" mbr_start_index="2"    use_last_known_bitrate="false" use_netsession_client="false" netsession_install_prompt_frequency_secs="-1" ad_server_timeout="20" ad_control_enabled="true" dvr_enabled="1" hds_live_low_latency="true" branding_preload="none" fullscreen_enabled="true" show_feature_bar="false" caption_language="en-us" auto_replay="false" />



   <mediaanalytics type="Object">

      <resources type="Array">

         <resource type="Object">

            <type type="String">text/javascript</type>

            <src type="String"></src>



      <plugin type="Object">

         <swf type="String"></swf>


      <config type="String"></config>

      <dimensions type="Object">

         <title type="String">#{media.title}</title>

         <playerId type="String">#{player.mode} Player</playerId>





IMPORTANT: Moving from XML to JSON

Here is a utility function that can be used to convert an existing AMP XML configuration file to the new JSON format. Run this function in the developer console on a page that contains an old version of AMP:


(function(){function g(a){var b;return a&&a.plugin&&(a.plugin.js?(b=a.plugin.js,delete a.plugin.js):a.plugin&&(b=a.plugin,delete a.plugin),a.plugin&&0==Object.keys(a.plugin).length&&delete a.plugin,b)?[{type:"text/javascript",src:b}]:[]}function f(a,b,c){a.forEach(function(a){b.push({type:c?c:"text/javascript",src:a})})}var b=akamai.amp.AMP.defaults.constructor.parseModule(akamai.amp.AMP.defaults.xml).module,c=b.config,h,e,d,k;for(h in c){e=c[h];resources=g(e);for(k in e)d=e[k],resources=resources.concat(g(d)), d&&d.resources&&(f(d.resources,resources),delete d.resources);0<resources.length&&(e.resources=resources)}b.head&&(c.resources=[],b.head.links&&f(b.head.links,c.resources,"text/css"),b.head.scripts&&(b.head.scripts.forEach(addResource.bind(null,c.resources)),f(b.head.scripts,c.resources)));return JSON.stringify(c,null,"\t")})();




IMPORTANT: Embedding changes

Overall, several config options and APIs have changed slightly. It is best advised to start with new config (amp.xml) when starting a new config, and migrate your changes into the new format.



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



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





<script type="text/javascript" src="../amp.premier/amp.premier.min.js?amp-defaults=../amp.premier/amp.premier.xml"></script>



Option 1: with load defaults

akamai.amp.AMP.loadDefaults("../amp.premier/amp.premier.xml", function () {

// defaults loaded



Option 2: without load defaults

akamai.amp.AMP.create("akamai-media-player", config_override, handlerFunction);

1 person found this helpful