<a-videosphere>

Note: This documentation is for the old 1.5.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

The videosphere primitive plays 360° videos in the background of the scene. Videospheres are a large sphere with the video texture mapped to the inside.

Examples

<a-scene>
<a-assets>
<video id="antarctica" autoplay loop="true" src="antarctica.mp4"> </video>
</a-assets>

<!-- Using the asset management system. -->
<a-videosphere src="#antarctica"></a-videosphere>

<!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
<a-videosphere src="africa.mp4"></a-videosphere>
</a-scene>

Methods

More indepth knowledge on the methods to alter video material can be seen over here

// to set specific time of video
document.querySelector("#antarctica").components.material.data.src.currentTime = 0 // start of video

// to play the videosphere
document.querySelector("#antarctica").components.material.material.map.image.play();

Attributes

Note that the videosphere primitive inherits common attributes.

Attribute Component Mapping Default Value
autoplay <video>.autoplay true
crossOrigin <video>.crossOrigin anonymous
loop <video>.loop true
radius geometry.radius 5000
segments-height geometry.segmentsHeight 64
segments-width geometry.segmentsWidth 64

Equirectangular Video

To be seamless, source videos should be equirectangular.

Caveats

iOS has a lot of restrictions on playing videos in the browser. To play an inline video texture, we must:

  • Set the <meta name="apple-mobile-web-app-capable" content="yes"> meta tag. A-Frame will inject this if missing.
  • Set the webkit-playsinline and playsinline attribute to the video element. A-Frame will add this to all videos if missing).
  • Pin the webpage to the iOS homescreen.

Inline video support on iOS 10 may change this. On certain Android devices or browsers, we must:

  • Require user interaction to trigger the video (such as a click or tap event). See Chromium Bug 178297