AMP - Frequently Asked Questions (Flash)

Document created by Di Hu Employee on Jun 30, 2015Last modified by Herberth Alvarado on Jan 26, 2017
Version 91Show Document
  • View in full screen mode

Maintainer: Herberth Alvarado

This document is part of Adaptive Media Player Web User Guide

For HTML5 questions check on: AMP - Frequently Asked Questions

 

 

 

 

_________________________________________________________________________________________________________________________

 

General information

Why does AMP stopped supporting Internet Explorer 8?

As of version 4.60 (Standard) and 2.60 (Premier), AMP for Web will no longer support IE8.

 

You will note that between April 8, 2014 and January 12, 2016, Microsoft transitioned end of support for IE8. Adaptive Media Player (AMP) for Web has maintained IE8 compatibility within AMP until late 2016, but It is no longer productive to do so.

 

If you would like to use AMP in IE8, please consider an older AMP version. However, we strongly recommend to upgrade your end-user's browser environment to take advantage of a consistently updated browser to ensure performance and security. For further discussion, please contact the AMP team.

 

Also, to consider: Major browsers began to disable Flash in late 2016 (led by Chrome and Safari), and since IE8 does not support proper HTML5 video standard either, so it is no longer a reasonable browser for video playback.

 

Why does the video becomes green and purple, like pixelated when running videos upper to 700 bitrate in chrome?

  • First, Chrome is having issues with the H.264 Hardware Acceleration decoding, Just the latest versions of chrome.
  • Second, If you can see this error in the console log: [.PPAPIContext]GL ERROR :GL_INVALID_ENUM : glTexImage2D: target was GL_TEXTURE_RECTANGLE_ARB or in the chrome GPU log (chrome://gpu/) maybe your browser is having decoding issues as I mentioned before. Issue 454251 -   chromium -  YouTube hardware accelerated black screen issues in M40 -  Monorail
  • Finally Google is aware about that error, but at this moment there isn’t a workaround or fix yet.

 

How to remove the "black bars” from AMP?

First disable Flash Hardware acceleration on Chrome. Just right click in the player and then click on Settings.

image1.png

Then please check you console log, the [.PPAPIContext]GL ERROR :GL_INVALID_ENUM : glTexImage2D: target was GL_TEXTURE_RECTANGLE_ARB error should disappear. If not please clear the browser data.

 

How to skinning AMP for Flash?

AMP for Flash offers basic skinning flexibility through the combination of an FLA file containing assets which are mapped to player components by IDs (linkage identifiers), and component property exposure via AMP’s configuration. In general, for each state of a given component, there is a corresponding asset. The FLA is then published to a skin SWF file, which is referenced in your DOM level configuration overrides. The FLA file containing the skin assets can be duplicated as many times as necessary to maintain multiple skins.

 

Here you can find more information about what you can achieve in terms of player customization. In case you want us to create this approach please reach out your account team: http://projects.mediadev.edgesuite.net/customers/docs/AMPPremierV2Skinning.pdf

 

FLA file: The asset to linkage identifier relationship is show in the following screen shots depicting the “play overlay” button and its associated assets, including its linkage identifiers within the Adobe CC Flash Professional IDE.


playoverlay.png  linkagemenu.png

 

Modifying assets: In order to modify single or multiple assets for your player skin you must import them into the skin FLA and replace the existing, corresponding asset. The same example above can be used as a reference for what you’d need to replace if you wished to change the “play overlay”.

 

Locating assets: The most efficient way to do this is to:

  1. Open the premier_assets.fla file.
  2. Locate the asset you wish to replace on stage.
  3. Right click on the asset.
  4. Select “Show in library” at the bottom of the contextual menu.


This will expose the asset in the library, along with its properties, linkage identifier, usages and other metadata.


Interactivity: In general the assets you link to a given component state are intended to be static. You are free to add interactivity to the extent supported by Flash, however custom skins on this level are not supported under AMP's SLA beyond very basic guidance. The component’s aren’t intended to contain interactive assets or logic injected from its skin FLA, but there are no restrictions in context to what Flash supports. Again, these kinds of modifications are not supported under the SLA. How far you take it is up to you.


Configuration file: AMP’s configuration file supports limited skinning customization via Javascript that define enabled and visible components. The level to which each component can be skinned is however not universal. An example can be found in AMP Premier’s default configuration file, pictured below.


Example

adOptions: {

   attributes: {

      style: "backgroundColor: 'rgba(0, 0, 0, 1)'"

   },

 

 

Another example is to change the color of the progress bar. Achieving this is as simple as adding the flash node within the config overrides. The "scrubBar" specifies the appearance of the whole bar while "progressBar" specifies the appearance of the progress of the playback.

 

flash: {

view: {

elements: {

controls: {

elements: {

scrubBar: {

attributes: {

style: "background: linear-gradient(90deg, #008000, #008000);"

}

},

progressBar: {

attributes: {

style: "background: linear-gradient(90deg, #FF0000, #1B1B1B);"

}

}

}

}

}

}

}

 

 

There are a wider range of flexibilities, which will be present in AMP’s documentation when complete. For the time being, the existing AMP Premier and AMP Standard configuration files can serve as as reference, and customers can feel free to ask regarding a specific component’s skinning and property options.

 

Using the AdOptions node: AMP can display a limited set of ad related information when configured to do so. By including the "adOptions" node in the "flash" level of your configuration file, you can specify sub-nodes that render ad information. The information is presented in a rectangle ("bar") that spans the width of the player, and fixed to the player's top left point by default. The bar has a limited set of styling controls exposed to control its look and feel.

 

The "adOptions" node should be nested within the "view" node of the "flash" section of your configuration file and accepts the following sub-nodes:

flash: {

   view: {

      elements: {

         adOptions: {

            attributes: {

               style: "backgroundColor: 'rgba(0, 0, 0, 1)'"

               },

            elements: {

               adChoices: {

                  attributes: {

                     target: "http://www.akamai.com/"

                  }

               },

               adCountdown: {},

               adCount: {}

            }

         }

      }

   }

}

 

 

Ad Choices: This element will render a clickable "Ad Choices" link within the Ad Options bar. It accepts a "target" attribute that will serve as the destination of the clickable link.

adChoices: {

   attributes: {

      target: "http://www.akamai.com/"

   }

},

 

 

Ad countdown:  This element will render one textual items within the Ad Options bar. If ad playback progress is available via the configured ad SDK, it will render a "<Next ad starts in | Video starts in> n <seconds>" message indicating how much time will expire before the next ad or media begins. This message can be customized using the following localization keys:

"MSG_NEXT_AD": "Next ad starts in: ",

"MSG_NEXT_VIDEO": "Video starts in: ",

"MSG_SECONDS": "seconds",

 

    Example:

 

adCountdown: {},

 

Ad position: If pod position information is available via the configured ad SDK, it will render an "Ad n of n" message indicating the index of the current ad within the pod and the total number of ads in the pod. This message can be customized using the following localization keys:

 

      MSG_AD_POSITION_1 - Represents the word "Ad" in in the example above.

      MSG_AD_POSITION_2 - Represents the word "of" in in the example above.

 

  Example:

 

adCount: {}

 

White space

If you want to add the white space (which will be required in many cases) you can include the entire node value in a CDATA declaration:

 

Example:

  <MSG_AD_POSITION_1><![CDATA[Advertisement ]]></MSG_AD_POSITION_1>

  <MSG_AD_POSITION_2><![CDATA[ of ]]></MSG_AD_POSITION_2>

 

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.
  • Since Flash doesn’t limit to one at a time, your page would need to keep track of the player instances. (We currently don't attempt to track that)

 

General configuration

How to use different namespace for the player in the config?

  • flash:{vars: {namespace: "unique name"}}

 

How to control the buffer window in flash?

  • The default buffering window for a stream is set to 3seconds by OSMF, you can override it in the config or in the embed in the flash vars.
  • flash:{vars: {buffer_time : 6}}

 

How to disable click on the video to play/pause?

  • in the embed use flash: { vars: {playback_clicktoggle_enabled: false} } } OR just the value itself in the config xml

 

Why do I need to add crossdomain.xml?

Flash (HDS) uses crossdomain.xml to see if OK to read files from a domain.

For crossdomain.xm you can take a look at: http://projects.mediadev.edgesuite.net/crossdomain.xml make one and upload it to your origin.

 

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"

    }

},

 

 

Which fonts are available in Flash?

Flash Default font list

  • [Monospaced Serif] Courier New, Courier, Nimbus Mono L, Cutive Mono, _typewriter,

  • [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, _typewriter,

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

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

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

  • [Small Capitals] Arial Unicode Ms, Arial, Helvetica, Verdana, Marcellus SC, _sans

  • [Default] Courier

 

Is extra_large font-size only available in flash?

Yes

 

Is possible to defined a Default font-family?

This is not a common JS API for both flash and HTML. So, it must be used only if AMP flash is loaded.

 

Availability: Only for AMP Flash

<Object>:

{fontFamily: {
        "Monospaced Serif": "<font>",
        "Proportional Serif": "<font>”
          }
}

 

In this object structure, the value <font> specified for each font family will become the primary font. AMP will append the specified font at the beginning of the the default font list as mentioned here.
E.g.:
<font> = “Arial”

  • Arial, Courier New, Courier, Nimbus Mono L, Cutive Mono, _typewriter,

  • Arial, Times New Roman, Times, Georgia, Cambria, PT Serif Caption, _serif


How to disable hardware acceleration in flash?

 

How to change the wmode setting in flash?

Add to the flash node in config override the "wmode" with the setting desired.

flash: {

   params: {

      wmode: "transparent"

   }

}

 

 

How to remove the loading spinner?

Add to the config override or loadhandler:

flash: {
   view: {
      elements: {
         loadingView: {
            attributes: {
               radius: 0
            }
         }
      }
   }
},

 

How to make the video non clickable so that it doesn’t play/pause the video?

Via configuration overrides:

flash : {

   vars: {

      playback_clicktoggle_enabled: false

   }

}

 

 

For Flash: you need to edit the logoOverlay node in the configuration json

 <element id=\"logoOverlay\" style=\"width: 64px; height: 60px; right: 15px; bottom: 25px; opacity: 1;\" />

 

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

 

In Version 34+ you have to add the flash variable on the AMP creation call as follows:

flash: {

   vars: {

      branding_preload: "none"

   }

}

 

How to turn off Akamai logo while loading?

To turn off the Akamai center logo please add branding_preload=“none” in the flash node in the config.

flash: {

   vars: {

      branding_preload: "none",

   },

},

 

 

 

How to remove endslate to not show logo and viewAll?

In version 34+ add in the call for the player the flash object and pass the enable|disable values as well as the hideElements values:

flash: {

   view: {

      elements: {

         endSlate: {

            attributes: {

               enabled: "true|false",

               hideElements: "brandingLogo|viewAll"

            }

         }

      }

   }

},

 

 

How to remove the caption button in Flash player?

For the Flash version, look for element id='captionBtn' in the flash section of the config file and remove it.

"captioning": { "enabled": false }

 

To remove caption button from  the Flash version on v34+, look for captionBtn:{} in the amp.min.js file and remove it.

To remove caption button from  the Flash version on v38+:  add the following code to remove it on Flash and HTML version:

captioning:{ enabled: false },

   flash: {

       view: {

         elements: {

            controls: {

               elements: {

                  captionBtn: null,

            }

         }

      }

   }

},

 

 

How to hide native amp ad bar || “is there any way of how to hide native ad bar?

You can use the following to disable it in config overrides:

config.flash =

{

    view: {

        elements: {

            adOptions: {

                attributes: {

                    style: "backgroundColor: 'rgba(0, 0, 0, 0)'"

                },

                elements: {

                    adCountdown: null,

                    adCount: null,

                    adChoices: null

                }

            }

        }

    }

};

 

How to load the static flash to reduce download size?

flash: { mode: "static” }

 

How to suppress mediaPlayerDurationChange messages on live stream?

Add to flash-vars, the suppress_events option in the config override.

flash: {
   vars: {
      suppress_events: "mediaPlayerDurationChange"
   }
},

 

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, and you can add an event listener like this:

    • amp.addEventListener(“mediaPlayerBufferingTimeout”)

 

How to add advertising component event listeners?

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

 

 

var player = document.getElementById("myAmpID");

player.eventHandler = myHandler;

function myHandler(type, data) {

    switch(type) {

        // Handle by type here

    }

}

 

Does the player have any API events when a bitrate switch occurs on an HDS stream?

In Flash mode for HDS we do have this event:

mediaPlayerDynamicStreamSwitchingChange Object { index: 6, bitrate: 3720, type: "COMPLETE", numStreams: 6 }

You can see this sequence in one sample session:

 

PastedGraphic-8.png

So you can listen to this as follows:

amp.addEventListener( “mediaPlayerDynamicSwitchChange”, {} ) ;

 

How to interact with the player

How to extract time code from a live stream?

Flash only

amp.getMediaElement().getCurrentTimeUTC()

Would return the current stream time in UTC format

 

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

  • In the appropriate location for your player configuration, set the flash live_disallow_archive option to true.

 

How to seek to live using API?

This is only available in Flash as HTML doesn’t support DVR. The direct method to invoke the Flash is amp.getMediaElement().goLive()

 

How to control fullscreen via API?

  • In flash, there are limitations on when the API event will work as Flash requires user interaction (this can’t be trigger by the API alone), however the function to use are below, please refer to AMP Premier  for an example.
    • amp.enterFullScreen
    • amp.exitFullScreen

 

How to add a custom endslate?

  • AMP in flash mode will not display the last frame of the video, which means that the customer will have to listen to the “ended” event in javascript and create an overlay on top of the player. They can refer to this page for examples on the event listeners: AMP - Samples - API

 

How to have our own debugging for Flash?

Please check out this page: https://community.akamai.com/docs/DOC-5518#jive_content_id_Flash_Debugging 

 

Advertising

How to resize ad to fit inside the space between the control bar and title bar?

 

config = {flash: { vars: {ads_auto_fit: “true”}}}

 

  • ad_server_timeout

    • Description: This option will cause the player to timeout the ad request

    • Flash only

    • Note: Flash setting, put in <player> node as attribute or in "flash: {vars: { ad_server_timeout: 30 } }"

  • ad_media_server_timeout

    • Description: This option will cause the IMA SDK to enforce the value as a timeout on media loading

    • Note: Flash setting, put in <player> node as attribute or in "flash: {vars: { ad_media_server_timeout: 30 } }"

  • amp.terminateAds() and amp.terminateAllAds()

    • Description: The former will terminate the current ad, assuming it is loaded and can be terminated. The latter will terminate a full pod. There are exceptions with respect to timing and use cases, all of which can't be enumerated here.

    • Flash & HTML5

 

How does companion ads work in AMP?

In Flash, the IMA SDK requires that dimensions are provided to query it for companions. AMP (in Flash) first looks for sets of companion dimensions specified in configuration to use when querying the SDK. If those aren’t found, AMP falls back to the ad tag URL’s “ciu_szs” parameter. If that parameter is not present, then no query is made. For every delimited set of dimensions found, AMP queries the SDK for companions of that dimensions.  

 

You can turn on/off companions in the config

 

disableCompanionAds: false|true,

 

How to recognize that one of the ads is an interactive?

The type of the ad, if available from the SDK. It is reflected in the payload value of the type property for HTML5/Wrapped Flash, and in the adSystem property for Flash-only.

 

 

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

 

_________________________________________________________________________________________________________________________

 

Responses to be update (from xml to json)

 

How to dynamically extract player version for MA reporting?

In the config xml add this to the MA section <playerId type="String">#{amp.getVersion()} (#{player.mode})</playerId>

 

How to limit the max bitrate for a stream in flash mode when not in fullscreen?

AMP can limit the maximum bitrate of the stream if it's not in fullscreen, this is helpful when high bitrate stream is available but is wasteful due to small size of the player.

  • In the player node in the config xml: inpage_bitrate_index_limit=“2”
  • Or in flash vars on the embed/config override { flash:  { vars: { inpage_bitrate_index_limit: 2} } }

 

How to to display icon for MBR stream, bitrate, quality?

You should use:

<element id="statsBtn" />Also you can press SHIFT-S to see stats overlay also

 

How to pass through the fullscreen click?

  • In the Flash view node set <element id="fullscreenBtn" action="external" />
  • To change it dynamically setPlayerProperty("fullscreenBtn”, {state:<desired-state>} )
  • Then add amp.addEventListener("mediaPlayerElementEvent", flashElementHandler);
    • listen for event.data.element “fullscreenBtn” and event.data.type of “click”
  • Example: AMP Premier

 

How to change the domain name in the “view all” section at the end of the video?

  • <domain type="String"></domain> in the config xml

 

How to remove the title bar when the video is paused?

  • Remove  <element id="infoOverlay" style="top: 0px;" /> from the config

 

How to disable click to pause on the main viewer?

Set the playback_clicktoggle_enabled flashVar / configuration option to false. This is a Flash only option. It can be set within the <player> node of the <flash> config section, or in JS level configuration overrides.

 

How to get the flash config?

  • amp.getFlashXML()

 

How to disable keyboard interaction?

  • You can add it in the wrapper XML as follows:

<flash type="Object"><vars type="Object"><keyboard_control_modes type="String"></keyboard_control_modes></vars></flash>

  • You can add it in page level overrides as follows:

config = {flash: { vars: { keyboard_control_modes: “”}}}

 

I’m getting low quality preroll ads with DFP, how to deal with this?

  • You can set <maxBitrate type="Number">xxxx</maxBitrate> in the IMA section of the config to set the desired bitrate.

 

 

 

This document is part of Adaptive Media Player Web User Guide









1 person found this helpful

Attachments

    Outcomes