Adding Videos

Explore incorporating both 2D and 360º videos in WebXR using A-Frame, enhancing user experience with interactive video controls and immersive elements.

We'll cover the following

The consumption of video-based content is on the rise. It’s one of the best mediums to effectively disseminate information. WebXR provides extensive support to include video-based interactivity for both conventional non-immersive 2D videos and immersive 360º videos. In the following sections, we elaborate on how to include videos to enrich our WebXR experiences.

To add a video to an A-Frame scene, we can use the <a-video> primitive. The primitive takes an src attribute that specifies the URL of the video file. Using other attributes, we can also specify the video’s width, height, and position attributes. Here’s an example of how to add a video to an A-Frame scene:

Press + to interact
<a-scene>
  <a-assets>
    <video
      id="video"
      src="video.mp4"
      loop></video>
  </a-assets>
  <a-video
    src="#video"
    width="16"
    height="9"
    position="0 0 -10"></a-video>
</a-scene>

Including non-immersive 2D videos

In this example, we add a simple video"Street with people walking at dusk" by mixkit.co (https://mixkit.co/free-stock-video/street-with-people-walking-at-dusk-3428/) to the scene, with the 8 × 4.5 dimensions. We also created a play-pause button similar to the one used in the sound example.

We can play/pause the video by aligning the cursor with the icon and then clicking it:

  • Under the <a-assets> primitive, we import all the required assets for the scene. We use the standard HTML <video> tag to import video in the A-Frame scene.

  • We use the <a-cursor> primitive to interact with the video controls in the scene.

  • We create a play-pause component to enable the functionality of playing and pausing the video with a single button.

  • We used the <a-video> primitive to load the video in our scene, then added <a-image> as a sub-element to append the icon as a child of the <a-video> primitive, and added the play-pause component to the <a-image> tag to control the play/pause functionality with the image icon.

  • If the video is paused, we play the video by triggering the play() method of the video element and changing the src attribute of the controls element to the pause icon. Similarly, when the video is paused, we trigger the pause() method of the video element and change the src attribute of the controls element to the play icon.

Including immersive 360º videos

Similar to the sky component, we can also use 360º videos to define our environment. We can use the <a-videosphere> primitive to load 360º video in the scene. The <a-videosphere> primitive is a sphere with a radius of 500 meters, with the video texture mapped inside it. In this example, we use the A-Frame’s boilerplate 360º video with on-click play/pause functionality.

We can start the video"360-video-boilerplate" by Ngokevin (https://cdn.aframe.io/360-video-boilerplate/video/city.mp4) by clicking anywhere in the window:

  • We import the video into the asset management system within the <a-assets> tag. We also attach the autoplay and loop components so that the video loops and plays automatically.

  • We create two enter-vr and window-click named components. These components enable the user activation that plays the video by clicking anywhere on the window or clicking on the “Enter VR / Full Screen” button.

The window-click component

The window-click component has three methods: init(), play(), and pause(). The init() method initializes the component by binding the onClick() function to the current instance of the component using the this.onClick = this.onClick.bind(this); call.

The play() method adds an event listener to the window object for the click event, causing the onClick() method to be called when the event is triggered.

The pause() method removes the click event listener from the window object.

The onClick() method is called when the click event is triggered and checks if the component’s el (entity) has a video material. If it does, the video is played; otherwise, the method returns and nothing happens.

The enter-vr component

The enter-vr event is triggered when the user enters VR mode in the scene. The component has three methods: init(), play(), and pause(). The init() method initializes the component by binding the playVideo() and playVideoNextTick() functions to the current instance of the component.

The playVideoNextTick() signifies a step in an event loop, representing a unit of time. The “next tick” denotes the imminent iteration of the event loop. When we schedule a function using the setTimeout(callback, 0) call, it runs in the subsequent tick, enabling tasks to follow the current context while preserving the order of asynchronous operations

The play() method adds an event listener to the enter-vr event on sceneEl (the A-Frame scene element) and calls the playVideoNextTick() method when the event is triggered. The pause() method removes the enter-vr event listener from the sceneEl element.

The playVideoNextTick() method is called when the enter-vr event is triggered and waits for the next tick of the event loop before calling the playVideo() method using the setTimeout(this.playVideo); call.

The playVideo() method is called by playVideoNextTick() and checks if the component’s el (entity) has a video material. If it does, the video is played. Otherwise, the method returns, and nothing happens.

Conclusion

Now, we’ve learned the fundamental skills to effectively utilize videos and media within our virtual environments, ensuring they’re informative, user-friendly, and engaging.