Home/

...

/

Adding Videos

Adding Videos

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

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