Question

这是我的代码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>

黑屏雯网络速度低（慢速网络）进度条 YouTube视频增强

在A帧Ar.Js中，当我们在模式上加载视频时，我需要一些进度条缓冲（如Youtube Video Navigator控件）控件

0 个答案: