The AAMP repository includes reference players that showcase various AAMP interfaces. The reference players are located in the /test/ReferencePlayer folder. See README.txt in the repository for complete instructions on running the sample reference players.

The reference players covers two basic use cases that are discussed in this document:

  • HTML Video Tags: A reference player that showcases AAMP interfaces that are leveraged using the standard HTML5 <video> tag.
  • Universal Video Engine (UVE): A set of JavaScript binding APIs for interacting with the AAMP player.

HTML Video Tag

AAMP can be used as a plugin to the HTML5 <video> tag by passing a URL that starts with aamp:// or aamps://. This approach is easy to use and is based on the HTML5 video APIs but extends mp4, webm, and ogg support to work with DASH and HLS format streams. Most browsers do NOT natively support streaming DASH and HLS. This mode of playback has limitations but may be adequate for some solutions.

The following example demonstrates calling the AAMP player using the <video> tag and some basic video API calls.

<html>
   <head>
      <title>AAMP playback in WPE browser using HTML5 video tag</title>
   </head>
   <script>var url = "aamp://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8";
      window.onload = function() { 
         var video = document.getElementById("video");
         video.src = url;
         video.play(); 
      }
   </script>
   <body">
      <video id="video" style="height:100%; width:100%; position:absolute; bottom:0; left:0" src=""/>
   </body>
</html>

The above example is simplistic and does not include any customizations or advanced API usage. For a more advanced example, see AAMPReferencePlayer.js that is included with the reference player examples.

Universal Video Engine (UVE)

UVE is a JavaScript binding API that is used to interact with the AAMP native player. The bindings are made available with the help of an injected bundle once the DOM elements are loaded by Webkit. See AAMP Engine Javascript API References for details.

UVE is generally recommended for apps that are targeted for the WPE browser and provides an interface to the highly performant native AAMP video engine. It exposes both basic and advanced features without the limitations of HTML5 video properties and methods. A video tag element is still used for hole punching to ensure the visibility of the background video plane, but it is not linked with the playback session.

The following example demonstrates calling the AAMP player using some basic UVE API calls:

<html>
   <head>
      <title>AAMP playback in WPE browser using UVE APIs</title>
   </head>
   <script>var url = "http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8";
      window.onload = function() {
         var player = new AAMPMediaPlayer();
         player.load(url);
      }
   </script>
   <body>
      <video style="height:100%; width:100%; position:absolute; bottom:0; left:0" src="dummy.mp4" type="video/aamp"/>
      </video>
   </body>
</html>

The above example is simplistic and does not include any customizations or advanced API usage. For a more advanced example, see UVERefPlayer.js that is included with the reference player examples.

Go To Top