多个 A 帧视频仅在移动设备上显示为黑屏
A-Frame Video out of Multiple Shows Up as Black Screen only on Mobile
我正在尝试使用 A-Frame <a-video>
将多个透明 .webm
视频分层以产生弹出效果,但有些视频无法在移动设备上加载。
例如,我有三个假设自动播放的测试视频:
- 后面的视频是
<a-plane>
上的 mp4 作为 material
- 中间是我在
<a-video>
上用 After Effects 创建的 .webm
文件
- 前面的视频也是我在
<a-video>
上用 After Effects 创建的 .webm
文件
IMG: On Mobile
IMG: On Pc
出于某种原因,中间视频从未在移动设备上加载。我用 .mp4 视频替换了它,效果很好。所以我尝试将中间视频导出为 .mp4,但是错误仍然存在!
我浏览了一些 github/Whosebug 并找到了谈论类似问题的帖子(这显然是一个长期的 运行 问题),但是 none 的 fixes/workarounds真的很有效。
我找到的资源:
- https://aframe.io/docs/1.2.0/introduction/faq.html#can-i-render-youtube-videos-as-a-texture
- https://github.com/aframevr/aframe/issues/316#issuecomment-170182397
- https://www.reddit.com/r/WebVR/comments/40b3d2/using_aframe_video_works_on_pc_but_is_black_on/
而且我的代码没有做任何花哨的事情(HTML,只是正文):
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs="sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960;">
<a-assets>
<video id="vid-1" loop="true" crossorigin="anonymous"
src='https://kucdinteractive.com/aomar/interactivespace/vid/LWA-ED.mp4'></video>
<video id="vid-2" loop="true" crossorigin="anonymous"
src='https://kucdinteractive.com/aomar/interactivespace/vid/Test_Webv2.webm'></video>
<video id="vid-pg4" autoplay loop="true" crossorigin="anonymous"
src='https://kucdinteractive.com/aomar/interactivespace/vid/Pg4-FULLSCENE(rq)_VP9.webm'></video>
</a-assets>
<a-marker preset='custom' type='pattern' url='https://kucdinteractive.com/aomar/interactivespace/img/pattern-veles.patt' vidhandler="target: #vid-1, #vid-2, #vid-pg4">
<a-plane width="1.78" height="1" rotation='270 0 0' src='#vid-1'></a-plane>
<a-video width="1.32" height="1" rotation='270 0 0' position='0 0.5 0' src='#vid-pg4'></a-video>
<a-video width="1.78" height="1" rotation='270 0 0' position='0 1 0' src='#vid-2'></a-video>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
(JS):
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;
}
}
}
});
附加信息:
- 手机:三星s20
- 已测试的移动浏览器:Samsung Internet、Chrome、Firefox (None
工作)
- 已测试的 PC 浏览器:Chrome、Edge、Firefox(有效)
有人对此错误有任何解决方法吗?
测试了 Piotr Adam Milewski 评论的内容,这是一个分辨率问题。当我缩放视频以适应 1080p 比例时,它在两种设备上都有效!他提供的 linked example 对解决这个问题也很有帮助!
我正在尝试使用 A-Frame <a-video>
将多个透明 .webm
视频分层以产生弹出效果,但有些视频无法在移动设备上加载。
例如,我有三个假设自动播放的测试视频:
- 后面的视频是
<a-plane>
上的 mp4 作为material
- 中间是我在
<a-video>
上用 After Effects 创建的 - 前面的视频也是我在
<a-video>
上用 After Effects 创建的
.webm
文件
.webm
文件
IMG: On Mobile
IMG: On Pc
出于某种原因,中间视频从未在移动设备上加载。我用 .mp4 视频替换了它,效果很好。所以我尝试将中间视频导出为 .mp4,但是错误仍然存在!
我浏览了一些 github/Whosebug 并找到了谈论类似问题的帖子(这显然是一个长期的 运行 问题),但是 none 的 fixes/workarounds真的很有效。
我找到的资源:
- https://aframe.io/docs/1.2.0/introduction/faq.html#can-i-render-youtube-videos-as-a-texture
- https://github.com/aframevr/aframe/issues/316#issuecomment-170182397
- https://www.reddit.com/r/WebVR/comments/40b3d2/using_aframe_video_works_on_pc_but_is_black_on/
而且我的代码没有做任何花哨的事情(HTML,只是正文):
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs="sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960;">
<a-assets>
<video id="vid-1" loop="true" crossorigin="anonymous"
src='https://kucdinteractive.com/aomar/interactivespace/vid/LWA-ED.mp4'></video>
<video id="vid-2" loop="true" crossorigin="anonymous"
src='https://kucdinteractive.com/aomar/interactivespace/vid/Test_Webv2.webm'></video>
<video id="vid-pg4" autoplay loop="true" crossorigin="anonymous"
src='https://kucdinteractive.com/aomar/interactivespace/vid/Pg4-FULLSCENE(rq)_VP9.webm'></video>
</a-assets>
<a-marker preset='custom' type='pattern' url='https://kucdinteractive.com/aomar/interactivespace/img/pattern-veles.patt' vidhandler="target: #vid-1, #vid-2, #vid-pg4">
<a-plane width="1.78" height="1" rotation='270 0 0' src='#vid-1'></a-plane>
<a-video width="1.32" height="1" rotation='270 0 0' position='0 0.5 0' src='#vid-pg4'></a-video>
<a-video width="1.78" height="1" rotation='270 0 0' position='0 1 0' src='#vid-2'></a-video>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
(JS):
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;
}
}
}
});
附加信息:
- 手机:三星s20
- 已测试的移动浏览器:Samsung Internet、Chrome、Firefox (None 工作)
- 已测试的 PC 浏览器:Chrome、Edge、Firefox(有效)
有人对此错误有任何解决方法吗?
测试了 Piotr Adam Milewski 评论的内容,这是一个分辨率问题。当我缩放视频以适应 1080p 比例时,它在两种设备上都有效!他提供的 linked example 对解决这个问题也很有帮助!