CODEWITHSUNDEEP
htmlhtml5-videovirtual-reality
a.bjorkmann
a.bjorkmann

Reputation: 109

Simple way of playing VR videos in a web browser

I want to have VR videos on my server and be able to play them on most devices through a website.

I have tried everything that comes up in the first feed on a google search but have not found want I’m been looking for.

The SW can be licensed, but I must be able to play videos from my server. There are several hosting services that does VR through , but that is not what I need.

A simple js include and a reference to the video url should be all that is needed….

Any tips on where to look?

Upvotes: 2

Views: 10033

Answers (2)

a.bjorkmann
a.bjorkmann

Reputation: 109

I ended up using delight VR web player. Simple integration and a free tier that fit my needs: https://delight-vr.com/

Upvotes: 0

easrng
easrng

Reputation: 445

If the videos are videospheres like this one, you can use aframe to show them. On desktop, you can use the mouse and drag to look around, or use a VR headset, and on mobile, you can use Google Cardboard-type VR headsets.

  var vid = document.getElementById('vid');

document.getElementById('play-button').addEventListener("click", function(e){
  this.style.display = 'none';
  vid.play();
}, false);
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>

<button
  id="play-button"
  style="position: fixed;
  top: calc(50% - 1.25em);
  left: calc(50% - 1.25em);
  font-size:2rem;
  width: 2.5em;
  height: 2.5em;
  z-index: 10;
  color:#fff;
  background-color:#333;
  border:none;
  border-radius:50%;
  text-align:center;"
>
  ▶
</button>

<a-scene id="vr-scene">
  <a-assets>
    <video
      id="vid"
      src="https://cdn.glitch.com/8935d2ed-c243-47e6-a74a-c275e93b7f20%2Fcity-4096-mp4-30fps-x264-ffmpeg.mp4?v=1580226185171"
      crossorigin="anonymous"
      autoplay="false"
      loop="true"
      style="display: none"
    ></video>
  </a-assets>

  <a-entity
    geometry="primitive: sphere;
                      radius: 5000;
                      segmentsWidth: 64;
                      segmentsHeight: 64;"
    material="shader: flat; src: #vid;"
    scale="-1 1 1"
  >
  </a-entity>
</a-scene>

Upvotes: 4

Related Questions