In A-Frame Ar.Js When We Load A Video on A Pattern, I Want Some Progress Bar Buffering (Like Youtube Video Navigator Controls) Controls

Question

Here's my code GLITCH . My code Works Fine . When I Show The HIRO Pattern The Video Plays When The Marker Is Not Visible It Pause . I Have 3 Queries :

When I Augment then a black screen occurs on the pattern for few seconds. After Few seconds the video loads and plays.I Dont Know Exactly What The Issue Is . I Think The Video Is being Loaded in background.It Occurs when the network(internet) is slow.My Requirement is , When I Load The Page The Video Should Load for first 5 to 10 sec .While video buffers it should show progress bar. I dont want to wait for the whole video to load first and then start playing augmentation . I want to play the video with buffer. It should load first 5 or 10sec and in background it should buffer .
I want Controls Like - Progress Bar(Loading) , Navigator,Mute/Unmute On The Video Like YouTube .
Is It Possible To Augment YouTube Video instead of take the video local server . Can We Use Youtube video link

When I Augment Black Screen occurs On The Marker, It Occurs Mainly When The Network Speed Is Low And I tried to integrate Youtube video But its not working .

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

Black Screen Wen The Network Speed Is Low (Slow Network) Progress Bar Youtube Video Augmenting

In A-Frame Ar.Js When We Load A Video on A Pattern, I Want Some Progress Bar Buffering (Like Youtube Video Navigator Controls) Controls

0 Answers0