title: type: primitives layout: docs parent_section: primitives source_code: src/extras/primitives/primitives/a-videosphere.js examples:

• title: Adding a Videosphere

  src: https://glitch.com/edit/#!/aframe-360-video-example?path=index.html

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.

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 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