Techdocs

AMP Web SDK

AMP player

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"
        };
        var amp = 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"
            };
            var amp = akamai.amp.AMP.create("amp", config);
        })
        .catch(function (error) {
            console.log("Could not load player config", event.error);
        });
      
  2. 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"
        };
        var amp = akamai.amp.AMP.create("amp", config);
      }
      </script>
      <script src="config.js"></script>
      
  3. 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"
      };
      var amp = akamai.amp.AMP.create("amp", config);