在网络浏览器中播放 VR 视频的简单方法答案

【问题标题】：Simple way of playing VR videos in a web browser在网络浏览器中播放 VR 视频的简单方法
【发布时间】：2020-01-28 14:16:37
【问题描述】：

我希望在我的服务器上拥有 VR 视频，并能够通过网站在大多数设备上播放它们。

我已经尝试了谷歌搜索的第一个提要中出现的所有内容，但没有找到我一直在寻找的东西。

软件可以获得许可，但我必须能够从我的服务器播放视频。有几种托管服务可以通过进行 VR，但这不是我需要的。

应该只需要一个简单的 js 包含和对视频 url 的引用......

关于在哪里看的任何提示？

【问题讨论】：

标签： html html5-video virtual-reality

【解决方案1】：

我最终使用了欢乐 VR 网络播放器。简单的集成和满足我需求的免费层：https://delight-vr.com/

【讨论】：

【解决方案2】：

如果视频是像this one 这样的视频球，您可以使用aframe 来显示它们。在桌面上，您可以使用鼠标拖动环顾四周，或使用 VR 耳机，在移动设备上，您可以使用 Google Cardboard 类型的 VR 耳机。

  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>

【讨论】：