A帧视频不播放，只有第1帧可见
我似乎无法播放我的视频。起初，它只是一个黑色的飞机，但我设法让它，我可以看到第一帧的视频，但它不播放，我也在使用MindAR。
视频是一个4秒长608 x 1408 h.264 MPEG视频。我试过另一个1080 x 1920的视频，但那一个只是显示一个黑色的飞机。
目前只测试我的Macbook Pro 14英寸，但最终将是安卓和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/mind-ar-js@1.1.4/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/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/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>
回答 1
Stack Overflow用户
发布于 2022-02-28 16:04:01
根据浏览器策略，目前大多数浏览器不允许未经用户同意的视频自动播放。您需要通过调用视频元素上的play()方法来捕获单击或点击并触发视频回放。无法合成click事件:一个框架实体不能工作，您需要一个用户单击的2D DOM元素( 窗户元素将允许用户单击屏幕上的任何位置，但也可以在用户需要点击的某个地方拥有一些按钮)。
请参见一个框架示例，该示例显示一个模态UI (使用A-Frame创建)以请求用户启动视频播放(组件侦听窗口元素上的单击/点击)：https://aframe.io/aframe/examples/test/video/
相应的组件逻辑可以在：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-click和hide-on-play不是内置的A框架组件，您必须在页面中导入它们(参见上面示例中的index.html )。
https://stackoverflow.com/questions/71271355
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号