Sky Effects Video

🧑‍💻 Technical Support
1

Hey,

Can I put a video on sky ? That shows it only on the sky. Can I have a code or something if its possible ?

Thank you,

2

Absolutely - this will look very similar to our sample project, which uses <a-sky> with a texture to make a galaxy effect in the sky:

<a-entity xrlayerscene="name: sky; edgeSmoothness:0.6">
  <a-sky material="src: #skyTexture;  transparent: true;  opacity: 1;  fog: false;"></a-sky>
</a-entity>

You should be able to use a video texture instead of an image texture, or perhaps use <a-videosphere> instead of a <a-sky>.

Make sure the <video> is muted - you might also need to manually call play() on the video from a custom component.

3

Thank you for the reply.
Actually I want to do something like this. But video not playing over the sky texture. Would you able to check what is the issue? Its good if I can play the video with sound.

<div id="orientationOverlay">
  <div id="message">
    <img src="./assets/rotate.svg" width="100px" />
    Please rotate the phone to portrait mode for a better experience.
  </div>
</div>

<a-scene
  xrextras-loading
  xrextras-runtime-error
  landing-page
  sky-coaching-overlay
  sky-recenter
  renderer="colorManagement: true"
  xrlayers
  device-orientation>
  <a-assets>
    <img id="skyTexture" src="./assets/space.png" />
    <video
      id="video"
      src="assets/test.mp4#t=0.001"
      autoplay
      loop
      muted
      playsinline
      crossorigin="anonymous"></video>
  </a-assets>

  <a-camera wasd-controls-enabled="false" position="0 3 0" raycaster="objects: .cantap"></a-camera>

  <!-- Sky texture -->
  <a-entity id="skyScene" xrlayerscene="name:sky; invertLayerMask:false; edgeSmoothness:0.6">
    <a-videosphere material="src: #skyTexture; transparent: true; opacity: 1; fog: false;">
    </a-videosphere>

    <!-- Overlay video plane -->
    <a-plane
      material="shader: flat; src: #video; transparent: true; opacity: 1;"
      position="0 10 -10"
      width="6"
      height="3.375"></a-plane>

    <a-entity light="type: ambient; intensity: 1;"></a-entity>
  </a-entity>
</a-scene>
4

If you want to play a video with sound, you will need to capture a user gesture to start the video. You could add a button in the experience that calls play() on the video, have the user tap the sky to start the video, etc.

See this sample project: