docs/primitives/a-videosphere.md
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.
<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>
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();
| 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 |
To be seamless, source videos should be equirectangular.
iOS has a lot of restrictions on playing videos in the browser. To play an inline video texture, we must:
<meta name="apple-mobile-web-app-capable" content="yes"> meta tag. A-Frame will inject this if missing.webkit-playsinline and playsinline attribute to the video element. A-Frame will add this to all videos if missing).Inline video support on iOS 10 may change this. On certain Android devices or browsers, we must: