В A-Frame Ar.Js, когда мы загружаем видео на паттерн, я хочу иметь некоторую буферизацию индикатора выполнения (например, элементы управления Youtube Video Navigator) - PullRequest
Новая
       52

В A-Frame Ar.Js, когда мы загружаем видео на паттерн, я хочу иметь некоторую буферизацию индикатора выполнения (например, элементы управления Youtube Video Navigator)

2 голосов
/ 07 июля 2019

Вот мой код GLITCH .Мой код работает отлично.Когда я показываю паттерн HIRO Видео воспроизводится, когда маркер не виден, он останавливается.У меня есть 3 запроса:

  • Когда я увеличиваю, на экране появляется черный экран в течение нескольких секунд . Через несколько секунд видео загружается и воспроизводится . Я не знаю точно, в чем проблема.Я думаю, что видео загружается в фоновом режиме. Происходит, когда сеть (интернет) работает медленно . Моё требование: когда я загружаю страницу, видео должно загружаться в течение первых 5-10 секунд. Пока видео буферыэто должно показать индикатор выполнения.Я не хочу ждать, пока сначала загрузится все видео, а затем начать воспроизведение дополнения.Я хочу воспроизвести видео с буфером.Это должно загрузить первые 5 или 10 секунд и в фоновом режиме это должно буферизоваться.

  • Мне нужны такие элементы управления, как - Индикатор выполнения (загрузка), Навигатор, Отключение звука / Включить звук На видео, как на YouTube.

  • Возможно ли увеличить YouTube видео вместо того, чтобы брать видео локальный сервер.Можем ли мы использовать Youtube ссылку на видео

Когда я увеличиваю черный экран появляется на маркере, это происходит в основном, когда скорость сети низкая, и я пытался интегрировать видео YoutubeНо это не работает. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script
      type="text/javascript"
      src="https://aframe.io/releases/0.8.2/aframe.min.js"
    ></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.1/aframe/build/aframe-ar.js"></script>
    <script
      type="text/javascript"
      src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"
    ></script>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">

    <!-- import the webpage's javascript file -->
    <script>
AFRAME.registerComponent("vidhandler", {
    // ...
    init: function () {
      // Set up initial state and variables.
      this.toggle = false;
      this.vid = document.querySelector("#vid");
      this.vid.pause();
    },
    tick: function () {
      if (this.el.object3D.visible == true) {
        if (!this.toggle) {
          this.toggle = true;
          this.vid.play();
        }
      } else {
        this.toggle = false;
        this.vid.pause();
      }
    }
  });</script>


    <a-scene vr-mode-ui="enabled: false" artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 90;' arjs='debugUIEnabled: false;detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>

    <a-assets>
        <video muted id="vid" response-type="arraybuffer" loop="false" crossorigin webkit-playsinline playsinline controls>
            <source src="https://cdn.glitch.com/5a71bb31-57f6-4304-9c91-437ed4041d3a%2Feby2.mp4?v=1562502183600" type="video/mp4">
        </video>
    </a-assets>

    <a-marker type="pattern" preset="hiro" vidhandler>
        <a-entity position="0 0 0">
            <a-video width="4" height="3" rotation="-90 0 0" material='transparent:true;shader:flat;side:double;src:#vid'></a-video>
        </a-entity>
    </a-marker>

    <a-entity camera>
        <a-entity cursor="rayOrigin: mouse;fuse: false;"></a-entity>
    </a-entity>

</a-scene>

  </body>
</html>

Черный экран Wen Низкая скорость сети (медленная сеть) Индикатор прогресса Youtube Видео с добавлением

...