How to make a VR180 player in WebXR for Vision Pro and Quest

In this tutorial, we show how to use Lifecast's immersive media player to display VR180 content, by embedding it in a web page. To view the video in VR, visit the web page in Vision Pro or Quest.

Encode the video in ffmpeg for Quest, Vision Pro, and mobile

First, you will need a video in VR180 format. For compatibility with Vision Pro, Quest, and other platforms, it is necessary to encode several different versions of the video (h264, h265, etc). For Vision Pro, a special kind of h265 called HVC1 is required. You also need a lower resolution version for compatability with mobile devices. Below, we give example commands in ffmpeg to create these encodings:


ffmpeg -i input_vr180.mov \
-c:v libx265 -preset medium -crf 29 -pix_fmt yuv420p -movflags faststart \
-profile:v main -tag:v hvc1 \
vr180_h265_hvc1.mp4

ffmpeg -i input_vr180.mov \
-c:v libx264 -preset fast -crf 29 -pix_fmt yuv420p -movflags faststart \
vr180_h264.mp4

ffmpeg -i input_vr180.mov \
-vf scale=1920:960 \
-c:v libx264 -crf 29 -movflags faststart -pix_fmt yuv420p \
vr180_h264_1920x960.mp4

Make a web page with the VR180 video player

Now that we have several encodings of the video, we'll create a minimal web page which contains the video player. The different URLs should be listed in order of preference, and the browser will automatically select the first one that works. You will need to host the video files on the same server or otherwise handle cross-domain (CORS) security issues.


<html>
  <head>
  <script src="https://cdn.jsdelivr.net/gh/fbriggs/lifecast_public/lifecast.min.js"></script>
  </head>
  <body>
  <div id="player_div" style="width: 600px; height: 500px;"></div>
  <script>
  LifecastVideoPlayer.init({
    _format: "vr180",
    _embed_in_div: "player_div",
    _media_urls: [
      "path/to/vr180_h265_hvc1.mp4",
      "path/to/vr180_h264.mp4",
      "path/to/vr180_h264_1920x960.mp4",
      ],
  });
  </script>
  </body>
</html>