我似乎无法播放我的视频。起初，它只是一架黑色飞机，但我设法让它看到视频的第一帧，但它无法播放。我也在使用 MindAR。
该视频是一个 4 秒长的 608 x 1408 h.264 MPEG 视频。我尝试过另一个 1080 x 1920 视频，但那个视频只显示黑色平面。
目前仅在我的 Macbook Pro 14 英寸上进行测试，但最终将在 Android 和 iOS 上进行测试，因为我正在制作 AR 出版物。
https://glitch.com/edit/#!/unreal-realities-test https://unreal-realities-test.glitch.me
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/dist/mindar-image-aframe.prod.js"></script>
<script>AFRAME.registerComponent("play-on-click", {
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener("click", this.onClick);
},
pause: function () {
window.removeEventListener("click", this.onClick);
},
onClick: function (evt) {
var videoEl = this.el.getAttribute("material").src;
if (!videoEl) {
return;
}
this.el.object3D.visible = true;
videoEl.play();
},
});
</script>
<script>
AFRAME.registerComponent('hide-on-play', {
schema: {type: 'selector'},
init: function () {
this.onPlaying = this.onPlaying.bind(this);
this.onPause = this.onPause.bind(this);
this.el.object3D.visible = !this.data.playing;
},
play: function () {
if (this.data) {
this.data.addEventListener('playing', this.onPlaying);
this.data.addEventListener('pause', this.onPause);
}
},
pause: function () {
if (this.data) {
this.data.removeEventListener('playing', this.onPlaying);
this.data.removeEventListener('pause', this.onPause);
}
},
onPlaying: function (evt) {
this.el.object3D.visible = false;
},
onPause: function (evt) {
this.el.object3D.visible = true;
}
});</script>
</head>
<body>
<a-scene
mindar-image="imageTargetSrc: https://cdn.glitch.global/644ffc8d-f16a-4136-9daf-b2a8d5be4cd1/ASCIItargets.mind?v=1646650005503; maxTrack: 2"
color-space="sRGB"
renderer="colorManagement: true, physicallyCorrectLights"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false"
>
<a-assets>
<img
id="card0"
src="https://cdn.glitch.global/644ffc8d-f16a-4136-9daf-b2a8d5be4cd1/Jesper1_2.jpg?v=1645538130237"
/>
<a-asset-item
id="card1"
src="https://cdn.glitch.global/644ffc8d-f16a-4136-9daf-b2a8d5be4cd1/3D%20Scan%20Test.gltf?v=1645538142025"
></a-asset-item>
<video
id="video"
preload="auto"
src="https://cdn.glitch.global/644ffc8d-f16a-4136-9daf-b2a8d5be4cd1/NFTDemo.mp4?v=1646662685556"
autoplay
loop="true"
crossorigin="anonymous"
width="1"
height="0.552"
webkit-playsinline
></video>
</a-assets>
<a-entity mindar-image-target="targetIndex: 2">
<a-image
src="#card0"
alpha-test="0.5"
position="0 0 0"
height="0.552"
width="1"
material=""
geometry=""
>
</a-image>
</a-entity>
<a-entity mindar-image-target="targetIndex: 1">
<a-gltf-model
rotation="0 -270 0"
position="0 0 0"
scale="1 1 1"
src="#card1"
animation="property: position; to: 0 0.2 0.2; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
></a-gltf-model>
</a-entity>
<a-entity
mindar-image-target="targetIndex: 0"
material="shader: flat; src: #video"
geometry="primitive: plane; width: 2.25; height: 5.25"
position="0 0 0"
rotation="0 0 0"
play-on-click
visible="false"
>
</a-entity>
<a-camera position="0 0 0" look-controls="enabled: false">
<a-entity
position="0 0 -1.5"
text="align: center;
width: 4;
wrapCount: 100;
color: black;
value: Tap to allow videos to play"
hide-on-play="#video">
</a-entity>
</a-camera>
</a-scene>
</body>
</html>根据浏览器政策，当今大多数浏览器不允许未经用户同意自动播放视频。您需要通过调用视频元素上的
play()click请参阅显示模态 UI（使用 A-Frame 制作）的 A-Frame 示例，以请求用户开始视频播放（组件侦听窗口元素上的单击/点击）：https://aframe.io/aframe/示例/测试/视频/
对应的组件逻辑可以在：https://github.com/aframevr/aframe/blob/master/examples/js/play-on-click.js#L16
您需要类似下面的代码：
window.addEventListener('click', function () {
document.querySelector('#video').play();
});
我修改了您的示例以说明如何在用户点击时播放视频。我省略了心灵部分。视频源覆盖了 UI，我认为这与问题无关：视频播放必须由用户操作触发。
https://glitch.com/edit/#!/roomy-hyper-bear
注意
play-on-clickhide-on-play您能否告诉我需要在代码中添加什么，以便在 Android 上指向触发器之前视频不会播放，并且视频在 iOS 上以相同的方式播放？