3

这是我的代码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视频增强

4

0 回答 0