-1

我发现了一个故障代码，它在扫描标记时播放视频，但问题是它只能在桌面上运行，在 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>

如果有人能告诉我该怎么做，那将非常有帮助

4

1 回答 1

2

这里的问题是视频的位置 - 它出现了，但很远。如果您将平面更改为<a-box>，并将其位置设置为0 0 0，则在 chrome 和适用于 android 的 firefox 上都会显示视频。

在这里查看。

一个提示：如果一些奇怪的堆栈溢出anwser代码无法正常工作 - 尝试尽可能简单地处理它： - 扔掉不必要的包含（aframe-extras例如） - 尽可能简化场景。任何额外的几何形状、组件 - 只是为了让它变得简单。

如果它没有帮助，那么它肯定会使调试更容易。

于 2019-03-11T17:42:48.263 回答