Question

我在小故障上发现了一个代码，可在扫描标记时播放视频，但问题是它仅适用于台式机，在chrome android上无法显示视频，只能听到声音。我不太了解编码。这是源代码：

<html>

<head>
  <!-- AR.js by @jerome_etienne - github: https://github.com/jeromeetienne/ar.js - info: https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf -->
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
  <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.4/dist/aframe-extras.min.js"></script>

  <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script>
  <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>
  <body style='margin : 0px; overflow: hidden;'>
  <div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'>
    <a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - Check out the repository !
  </div>
  <a-scene embedded artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 30; canvasWidth: 240; canvasHeight: 180' >
    <a-assets>
      <video id="vid" src="https://cdn.glitch.com/b62367d1-ceab-454b-b664-b032f995ed86%2FBig_Buck_Bunny_Trailer_1080p.ogv.720p.webm?1532370072191" loop="true" crossorigin>
    </a-assets>
   
    <a-marker id="memarker" preset="hiro" vidhandler>
      <a-plane position='1 2 -2' scale="2 2 2" width="2" rotation="-90 0 0" material='transparent:true;opacity: 0.7;src:#vid'></a-plane>
    </a-marker>

  </a-scene>
</body>


</html>

如果有人可以告诉我该怎么办，那将非常有帮助

Answer 1

这里的问题是视频的位置-它正在显示，但距离很远。如果将平面更改为<a-box>，并将其位置设置为0 0 0，则在chrome和适用于Android的Firefox上都将显示视频。

签出here。

一个提示：如果some weird stack overflow anwser代码无法正常工作-尝试尽可能简单地对其进行处理： -丢弃不必要的内容（例如aframe-extras） -尽可能简化场景。任何额外的几何形状和组件-只是为了简单起见。

如果没有帮助，那么可以肯定，它将使调试更加容易。

我正在尝试在ar.js上做一个项目

1 个答案: