Простой способ воспроизведения VR-видео в веб-браузере - PullRequest
Новая
       22

Простой способ воспроизведения VR-видео в веб-браузере

0 голосов
/ 28 января 2020

Я хочу, чтобы видео VR было на моем сервере, и я мог воспроизводить их на большинстве устройств через веб-сайт.

Я перепробовал все, что появляется в первом фиде поиска Google, но не нашел хочу, что я искал.

Программное обеспечение может быть лицензировано, но я должен иметь возможность воспроизводить видео с моего сервера. Есть несколько хостинговых сервисов, через которые проходит VR, но это не то, что мне нужно.

Простое включение js и ссылка на URL-адрес видео должны быть всем, что нужно….

Любые советы о том, где искать?

1 Ответ

0 голосов
/ 28 января 2020

Если видео - это видеосферы, такие как , эта , вы можете использовать aframe , чтобы показать их. На рабочем столе вы можете использовать мышь и перетаскивать, чтобы осмотреться, или использовать гарнитуру VR, а на мобильном телефоне вы можете использовать гарнитуры VR типа Google Cardboard. 

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