AMP - VR 360 Playback

Document created by Maverick Chacon Garro Employee on Dec 18, 2017Last modified by Herberth Alvarado on Apr 12, 2018
Version 4Show Document
  • View in full screen mode

Mantainer: Maverick Chacon Garro

This document is part of Adaptive Media Player Web User Guide


Quick overview 

A-Frame is a VR framework based on Mozilla WebVR, as an Open source project  provides the most complete VR experience in your browser. 
AMP has adapted and released the adapted version of Aframe into a player plugin. 



According to A-frame, it should work in most modern browser and devices.

Compatible devices and browsers.  

Note: IOS 11 supports A-frame but for 360 videos we suggest to use an video/mp4 format instead of HLS, because IOS has their own HLS mechanism processor an it affects A-frame video-sphere element.   


Getting started

If you already has the latest version of the player (89+) you can find aframe plug-in within player distro. 


For 88 version and below
Plug-in could be found here  
Within the compressed file you will found 


|__ amp-web-aframe
      |__ Akamai
      |    |__amp

      |         |_ aframe

      |__ Samples


aframe folder needs to be moved under akamai/amp folder in your current player implementation.   

then, make sure to reference the plug-in files via config, such as we mention below. 

The configuration will look pretty similar to the following:

plugins: {
      aframe: {
            resources: [
                  { src: "//",  type: "text/javascript" },
                  { src: "#{paths.plugins}aframe/Aframe.min.js", debug: "#{paths.plugins}aframe/Aframe.js", type: "text/javascript" },
                  { src: "#{paths.plugins}aframe/Aframe.min.css", debug: "#{paths.plugins}aframe/Aframe.css", type: "text/css"}
              data: {
                  rotation: "0 270 0",
                  strict: true


Quick reference of every field:

  • Resources: library and AMP Aframe plug-in.  both files are required. 
  • Data: contains additional Aframe plug-in configuration.
    • rotationA-frame rotation component defines the orientation of an entity. It takes the pitch (x), yaw (y), and roll (z) as three space-delimited numbers indicating degrees of rotation.
    • strict: [Optional] Enables or disables 360 rendering when media object contains category:["360"], If strict is false AMP will keep 360 rendering.
  • Enable: activates or deactivates the Event Management.

Media Object 

guid: "Video 1",
title: "VR sample 1",
poster: "/images/hd_world.jpg",
category: ["360"],
source: [
{ src: "http://vrsample.mp4", type: "video/mp4" }



Note: 360 category is an optional value, if you have strict mode enabled you should add this category if you want to automatically enabled 360 rendering for a specific media. 

Advanced Samples

AMP MP4 VR playback 

AMP HLS VR playback
HLS.js amp-web-aframe 

AMP audio playback - 360 image
Audio playback amp-web-aframe 
AMP VR Tester
AMP Aframe test page  




This document is part of Adaptive Media Player Web User Guide

1 person found this helpful