3

ここに私のコードGLITCH があります。私のコードは正常に動作します。HIROパターンを表示すると ビデオが再生されます マーカーが表示されていない場合は一時停止します . 私は3つのクエリを持っています:

  • I Augment を実行すると、パターン上に数秒間黒い画面が表示されます。数秒後、ビデオが読み込まれて再生されます。問題が何であるか正確にはわかりません。ビデオがバックグラウンドでロードされていると思います.ネットワーク（インターネット）が遅いときに発生します.私の要件は、ページをロードするとき、ビデオは最初の5〜10秒間ロードする必要があります.ビデオがバッファリングされている間、進行状況バーを表示する必要があります. ビデオ全体が最初に読み込まれるのを待ってから、拡張機能の再生を開始したくありません。動画をバッファ付きで再生したい。最初の 5 秒または 10 秒でロードされ、バックグラウンドでバッファリングされます。

  • YouTubeのようなビデオで、プログレスバー（読み込み中）、ナビゲーター、ミュート/ミュート解除のようなコントロールが必要です。

  • ビデオ ローカル サーバーを使用する代わりに、YouTube ビデオを増強することは可能ですか。Youtubeビデオリンクを使用できますか

Augment すると、マーカーで黒い画面が発生します。主にネットワーク速度が低いときに発生し、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 The Network Speed Is Low (Slow Network) プログレス バー Youtube Video Augmenting

4

0 に答える 0