我有一个使用 MindAR 和 A-Frame 触发视频叠加的图像目标。我想在视频叠加层顶部的特定位置放置一个按钮，目标是按下此按钮时播放音频文件。
虽然我可以看到覆盖视频和正确定位的按钮，但该按钮不可单击。看来视频叠加可能会拦截点击事件，或者按钮没有按预期接收点击事件。
如何使按钮在视频叠加层上可点击？下面是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AR Video Overlay with Audio Toggle</title>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mindar-image-
aframe.prod.js"></script>
<style>
body { margin: 0; overflow: hidden; }
.a-enter-vr { display: none; }
#debugInfo {
position: fixed;
top: 10px;
left: 10px;
background: rgba(0,0,0,0.5);
color: white;
padding: 10px;
font-family: monospace;
z-index: 1000;
}
</style>
</head>
<body>
<div id="debugInfo"></div>
<a-scene mindar-image="imageTargetSrc: ./targets.mind;" color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false">
<a-assets>
<video id="mainVideo" src="./ram.mp4" preload="auto" loop></video>
<audio id="audio1" src="./audio2.mp3" preload="auto"></audio>
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false">
<a-entity cursor="fuse: false; rayOrigin: mouse;" raycaster="objects:
.clickable"></a-entity>
</a-camera>
<a-entity mindar-image-target="targetIndex: 0">
<a-video src="#mainVideo" position="0 0 0" rotation="0 0 0" width="1"
height="1.26" play-on-click></a-video>
<!-- Toggle Audio Button -->
<a-entity position="-0.04 0.34 0.05" class="clickable" audio-control>
<a-circle radius="0.05" material="color: #00FFFF; opacity: 0.7; emissive:
#00FFFF; emissiveIntensity: 0.5;"></a-circle>
<a-text value="Toggle Audio" align="center" position="0 0 0.01" scale="0.05
0.05 0.05" color="#000000"></a-text>
</a-entity>
</a-entity>
</a-scene>
<script>
const mainVideo = document.querySelector("#mainVideo");
const audio1 = document.querySelector("#audio1");
const debugInfo = document.querySelector("#debugInfo");
function updateDebugInfo(message) {
debugInfo.innerHTML += message + "<br>";
console.log(message);
}
function toggleAudio() {
if (audio1.paused) {
audio1.play();
updateDebugInfo("Audio started playing");
} else {
audio1.pause();
updateDebugInfo("Audio paused");
}
}
AFRAME.registerComponent('play-on-click', {
init: function () {
this.onClick = this.onClick.bind(this);
this.el.addEventListener('click', this.onClick);
updateDebugInfo("Video click listener added");
},
onClick: function (evt) {
mainVideo.play();
updateDebugInfo("Video play triggered");
}
});
AFRAME.registerComponent('audio-control', {
init: function () {
this.el.addEventListener('click', toggleAudio);
updateDebugInfo("Audio button click listener added");
}
});
const sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener("arReady", (event) => {
updateDebugInfo("MindAR is ready");
});
sceneEl.addEventListener("arError", (event) => {
updateDebugInfo("MindAR failed to start");
});
sceneEl.addEventListener("targetFound", event => {
updateDebugInfo("Target found");
mainVideo.play();
});
sceneEl.addEventListener("targetLost", event => {
updateDebugInfo("Target lost");
mainVideo.pause();
});
// Ensure audio can play on mobile devices
document.addEventListener('click', function() {
audio1.play().then(() => {
audio1.pause(); // Immediately pause after enabling audio
updateDebugInfo("Audio enabled");
}).catch(e => {
updateDebugInfo("Audio enable failed: " + e);
});
}, { once: true });
</script>
</body>
</html>
<style>
body { margin: 0; overflow: hidden; }
.a-enter-vr { display: none; }
#debugInfo {
position: fixed;
top: 10px;
left: 10px;
background: rgba(0,0,0,0.5);
color: white;
padding: 10px;
font-family: monospace;
z-index: 1000;
}
a-video {
pointer-events: none; /* Allow clicks to pass through */
}
</style>
<a-entity mindar-image-target="targetIndex: 0">
<a-video src="#mainVideo" position="0 0 0" rotation="0 0 0" width="1" height="1.26" play-on-click></a-video>
<!-- Toggle Audio Button -->
<a-entity position="-0.04 0.34 0.05" class="clickable" audio-control style="pointer-events: auto;">
<a-circle radius="0.05" material="color: #00FFFF; opacity: 0.7; emissive: #00FFFF; emissiveIntensity: 0.5;"></a-circle>
<a-text value="Toggle Audio" align="center" position="0 0 0.01" scale="0.05 0.05 0.05" color="#000000"></a-text>
</a-entity>
</a-entity>