AMP - Deployment for share and SSL hosts

Document created by Herberth Alvarado Employee on Mar 23, 2016Last modified by Herberth Alvarado Employee on Apr 21, 2017
Version 11Show Document
  • View in full screen mode

Maintainer: Andrea Zuniga

This document is part of Adaptive Media Player Web User Guide

 

General SSL - aware deployment

How to embed the player in a full HTTPS page?

 

When the default player is embedded in a HTTPS page, as many elements are configured to be delivered via HTTP, the browser will throw mixed content warnings, and in the case of IE8, the player will not load.


If the desire is to achieve a full HTTPS delivery of everything on the page including the stream’s segments. There are several things that needs to be done:

 

Edit: on V34+ this change can be done directly on the player creation as follows:

var config = {

flash: {

resources: [{

id: "AkamaiAdvancedStreamingPlugin",

src: "https://sslplayers-vh.akamaihd.net/flash/plugins/osmf/advanced-streaming-plugin/v3.9/osmf2.0/AkamaiAdvancedStreamingPlugin.swf",

absolute: true,'

host: "osmf",

main: "com.akamai.osmf.AkamaiAdvancedStreamingPluginInfo",

type: "application/x-shockwave-flash"

}]

}

};

  • SSL transfer must be enabled in HDCore to play HTTPS stream. Please add the "hds_enable_ssl_transfer: true" in flashvar as follows:

var config = {

flash: {

vars: {

hds_enable_ssl_transfer : true

}

}

};

 

  • Also note: For Token protected HLS 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 in the configuration:

{

   withCredentials: true

}

Sample: AMP - Samples - XHR With Credentials 

 

  • For the Analytics section:

 

    • If using Comscore:

replace:

http://b.scorecardresearch.com/b

with

https://sb.scorecardresearch.com/b

 

    • If using Nielsen,

     replace

http://secure-us.imrworldwide.com/cgi-bin/m

                     with

https://secure-us.imrworldwide.com/cgi-bin/m

 

    • If using DFP,

replace:

http://

with

https:// in your ad tag

 

NOTE: Use your specific beacon configs in this change. You may need to procure a separate secure beacon path from Luna or your Akamai account team,If using Omniture, confirm with your Adobe Rep your secure hostname.

 

 

Twitter


AMP's  self-detect for desktop/mobile modes is well suited for Twitter Player Card. Check out AMP Premier installation athttps://twitter.com/FoxNewsVideo  from a desktop browser. The iframe that FoxNews uses is here https://video.foxnews.com/v/video-embed.html?video_id=2682080460001 Be sure to click View Media.

 

The overall steps are here:

  1. You should host an iframe with the AMP player in a div that fills the full body of the page, and this will become the iframe that Twitter uses.
  2. Make sure the iframe and the player and it's config over HTTPS. (minus the stream). See the guidelines below. Repeatedly test access to the Player Card iframe until you need now browser warning about insecure content. Other customers have told us that non-secure content is OK after playback begins, so you want want to make auto play off for your embed.
  3. Post the Player Card link to twitter following Twitter's instructions.


For your video page, don’t forget the twitter tags.
For an example of an the web page tags, Fox New's tags in http://video.foxnews.com appear as:      

<meta name="twitter:card" content="player">     

<meta name="twitter:url" content="http://video.foxnews.com">     

<meta name="twitter:title" content="Former NFL star takes action after teens trashed home">   

<meta name="twitter:description" content="Brian Holloway is using social media to help police">     

<meta name="twitter:image" content="http://video.foxnews.com/images/foxnews/thumb-placeholder.png">     

<meta name="twitter:player" content="https://video.foxnews.com/v/video-embed.html?video_id=2682080460001">     

<meta name="twitter:player:width" content="435">     

<meta name="twitter:player:height" content="251">

 

Facebook


We intentionally retain non-Javascript modes of AMP's Flash mode (AMP SWF) in part for Facebook embeds which allow SWF's only with no JS access.Check out  https://www.facebook.com/FoxNewsVideo .You need to make an additional, special flash-only version of the XML config (older format that you don't usually work with directly).

  1. You could go to any embed you have of AMP and run  amp.getFlashXML().toString() (or in older versions amp.player.getConfigXML() in Chrome) or similar and construct a Flash-only config from that.
  2. Save as amp-flashonly.xml nearby your regular config(s). (It should then look SOMETHING like this flash-only config here:http://video.foxnews.com/assets/akamai/resources/conf/config.xml? except this has more modules enabled.)
  3. Then, you should play around with loading a URL as follows in your browser, readying the the path for the OG tag     http://www.yourdomain.com/….../AkamaiPremierPlayer.swf?settings_url=YOURFLASHONLYCONFIGPATH&video_url=YOURFLASHSTREAMURL (note the other examples use data_feed_url rather than video_url but that is not for your use case) and there you go!
  4. Put the appropriate OG tags in your video page, and then try to share it to your wall


For your video page, don’t forget the OG tags.See below for http://video.foxnews.com examples of the tags  they are good examples overall

 

      <meta property="og:title" content="Former NFL star takes action after teens trashed home">

      <meta property="og:description" content="Brian Holloway is using social media to help police">

      <meta property="og:url" content="http://video.foxnews.com">

      <meta property="og:image" content="http://video.foxnews.com/images/foxnews/thumb-placeholder.png">

      <meta property="og:type" content="video">

      <meta property="og:video" content="http://video.foxnews.com/assets/video-player.swf?video_id=2682080460001&amp;d=video.foxnews.com&amp;auto_play=true">

      <meta property="og:video:secure_url" content="https://video.foxnews.com/assets/video-player.swf?video_id=2682080460001&amp;d=video.foxnews.com&amp;auto_play=true">

      <meta property="og:video:height" content="360">

      <meta property="og:video:width" content="640">

      <meta property="og:video:type" content="application/x-shockwave-flash">

 

 

This document is part of Adaptive Media Player Web User Guide

Attachments

    Outcomes