Loading remote configurations

There are some scenarios where there is a need to load a player configuration from a remote location. Here are a few methods to achieve this goal:

  1. Load the configuration client side using XMLHttpRequest:
  • config.json:
  {"autoplay":true}
  
  • html page:
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "config.json");
  xhr.onload = function (event) {
    var config = JSON.parse(xhr.responseText);
    // override page specific values
    config.media = {
      src: "http://projects.mediadev.edgesuite.net/customers/akamai/video/VfE.mp4",
      type: "video/mp4"
    };
    akamai.amp.AMP.create("amp", config);
  };
  xhr.onerror = function (event) {
    console.log("Could not load player config", event.error);
  };
  
  • Using AMP's Promise based request functionality:
  akamai.amp.AMP.requestJson("config.json")
    .then(function (config) {
      // override page specific values
      config.media = {
        src: "http://projects.mediadev.edgesuite.net/customers/akamai/video/VfE.mp4",
        type: "video/mp4"
      };
      akamai.amp.AMP.create("amp", config);
    })
    .catch(function (error) {
      console.log("Could not load player config", event.error);
    });
  
  1. Load the configuration client side using JSONP:
  • config.json:
  jsonp({autoplay:true});
  
  • html page:
  <script>
  function jsonp(config) {
    // override page specific values
    config.media = {
      src: "http://projects.mediadev.edgesuite.net/customers/akamai/video/VfE.mp4",
      type: "video/mp4"
    };
    akamai.amp.AMP.create("amp", config);
  }
  </script>
  <script src="config.js"></script>
  
  1. Embed the configuration statically in the page using server side script:
  • config.json:
  {"autoplay":true}
  
  • html page:
  var config = <?php include("config.json"); ?>;
  // override page specific values
  config.media = {
    src: "http://projects.mediadev.edgesuite.net/customers/akamai/video/VfE.mp4",
    type: "video/mp4"
  };
  akamai.amp.AMP.create("amp", config);