最终更新 2019 年 9 月 13 日晚上 11:50：此代码适用于多个自定义标记，但标记不能太相似。我以前的自定义标记都是具有轻微差异的星星，我认为这以某种方式绊倒了它。但是有了更新、更独特的标记，它就可以工作了。
但是，由于某种原因，这并没有影响使用“分离组件”方法时的结果。
更新：2019 年 9 月 13 日：以下代码适用于 hiro 和 kanji 预设标记以及一个自定义标记。但是，当我添加多个自定义标记时，视频会冻结在额外的标记上。我希望每个标记都能触发独特的视频（某些视频将在多个标记中重复使用）。在我当前的代码中，我只是让它们都触发了两个视频。*如何让此代码与多个自定义标记一起使用？
<!-- A-FRAME -->
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script
src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-
ar.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-
extras/v4.1.2/dist/aframe-extras.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-gif-
shader/master/dist/aframe-gif-shader.min.js"></script>
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Latest compiled and minified CSS -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<!-- vidhandler component -->
<script>
AFRAME.registerComponent('vidhandler', {
schema: {
target: {type: 'string'}
},
init: function() {
this.videoNodes = document.querySelectorAll(this.data.target)
},
tick: function() {
if (this.el.object3D.visible == true) {
if (!this.toggle) {
this.toggle = true;
for (let i = 0; i < this.videoNodes.length; i++) {
this.videoNodes[i].play();
}
}
} else {
if (this.toggle) {
for (let i = 0; i < this.videoNodes.length; i++) {
this.videoNodes[i].pause();
}
this.toggle = false;
}
}
}
});
</script>
<!-- assets for vidhandler -->
<a-assets >
<video crossOrigin="Anonymous" Id="vid"
loop="true"src="assets\textures\alpha.webm">
</video>
<video crossOrigin="Anonymous" Id="videonew" loop="true" src="assets\textures\VideoNew.mp4">
</video>
</a-assets>
<!-- marker1: hollywood star 1 -->
<a-marker vidhandler="target: #vid, #videonew" type='pattern' url='https://raw.githubusercontent.com/merowell/custom-markers-with-video/master/aframe/examples/assets/hollywood-stars/patt/pattern-hollywood-star1.patt'>
<!-- add transparent video (.webm) -->
<a-plane position='0 .3 0' width='3' height='2' rotation="-90 0 0" material='transparent:true;alphaTest:0;src:#vid'></a-plane>
<!-- add non transparent video (.mp4) -->
<a-plane position='0 .2 0' width='1.5' height='1.5' rotation="-90 0 0" material='src:#videonew'></a-plane>
</a-marker>
<!-- marker2: hollywood star 2 -->
<a-marker vidhandler="target: #vid, #videonew" type='pattern' url='https://raw.githubusercontent.com/merowell/custom-markers-with-video/master/aframe/examples/assets/hollywood-stars/patt/pattern-hollywood-star2.patt'>
<!-- add transparent video (.webm) -->
<a-plane position='0 .3 0' width='3' height='2' rotation="-90 0 0" material='transparent:true;alphaTest:0;src:#vid'></a-plane>
<!-- add non transparent video (.mp4) -->
<a-plane position='0 .2 0' width='1.5' height='1.5' rotation="-90 0 0" material='src:#videonew'></a-plane>
</a-marker>
2019 年 9 月 12 日更新：如何使用单独的标记播放单独的视频，并可选择重复使用某些视频？使用以下代码，视频显示为静态图像：
<!-- vidhandler component -->
<script>
AFRAME.registerComponent('vidHandler', {
// define a variable in which we will keep the video element
schema: {
targets: {type: "string"}
},
init: function() {
this.toggle = false;
this.vidNodes = document.querySelectorAll(this.data.targets);
for (let i = 0; i < this.vidNodes.length; i++) {
this.vidNodes[i].pause();
}
},
tick: function() {
if (this.el.object3D.visible == true) {
if (!this.toggle) {
this.toggle = true;
for (let i = 0; i < this.vidNodes.length; i++) {
this.vidNodes[i].play();
}
}
} else {
this.toggle = false;
for (let i = 0; i < this.vidNodes.length; i++) {
this.vidNodes[i].pause();
}
}
}
});
</script>
原始问题：
请原谅我，因为我对此很陌生......
我正在使用带有 aframe 的 ar.js 来创建 webAR 体验。我正在使用两个不同的标记来触发两个不同的视频。
如何让 Aframe.register 组件分别触发我的两个视频？这两个视频被列为资产，具有以下 ID：#vid #videonew
预期结果是两个标记显示循环的唯一视频，无论两个标记都显示给网络摄像头，还是只是其中一个标记。但实际结果是视频只有在两个标记都显示给网络摄像头时才会播放。否则，视频单独显示为静态图像。
<!-- Video Player -->
<script>
AFRAME.registerComponent('vidhandler', {
init: function() {
this.toggle = false;
this.vidNodes = document.querySelectorAll("#vid, #videonew");
for (let i = 0; i < this.vidNodes.length; i++) {
this.vidNodes[i].pause();
}
},
tick: function() {
if (this.el.object3D.visible == true) {
if (!this.toggle) {
this.toggle = true;
for (let i = 0; i < this.vidNodes.length; i++) {
this.vidNodes[i].play();
}
}
} else {
this.toggle = false;
for (let i = 0; i < this.vidNodes.length; i++) {
this.vidNodes[i].pause();
}
}
}
});
</script>
<a-assets >
<video crossOrigin="Anonymous" preload="auto" Id="vid" loop="true" webkit-playsinline playsinline controls>
<source type="video/webm" src="assets\textures\alpha.webm">
<h3>Error : Your browser does not support.</h3>
<!-- FOR NOTMAL VIDEO YOU CAN USE MP4 or WEBM BUT FOR ALPHA VIDEO YOU NEED TO USE .WEBM FORMAT-->
</video>
<video crossOrigin="Anonymous" preload="auto" Id="videonew" loop="true" webkit-playsinline playsinline controls>
<source type="video/webm" src="assets\textures\VideoNew.mp4">
<h3>Error : Your browser does not support.</h3>
<!-- FOR NOTMAL VIDEO YOU CAN USE MP4 or WEBM BUT FOR ALPHA VIDEO YOU NEED TO USE .WEBM FORMAT-->
</video>
</a-assets>