多个 A 帧视频仅在移动设备上显示为黑屏

Question

我正在尝试使用 A-Frame <a-video> 将多个透明 .webm 视频分层以产生弹出效果，但有些视频无法在移动设备上加载。

例如，我有三个假设自动播放的测试视频：

后面的视频是 <a-plane> 上的 mp4 作为 material
中间是我在 <a-video>

.webm

前面的视频也是我在 <a-video>

.webm

IMG: On Mobile

IMG: On Pc

出于某种原因，中间视频从未在移动设备上加载。我用 .mp4 视频替换了它，效果很好。所以我尝试将中间视频导出为 .mp4，但是错误仍然存在！

我浏览了一些 github/Whosebug 并找到了谈论类似问题的帖子（这显然是一个长期的运行问题），但是 none 的 fixes/workarounds真的很有效。

我找到的资源：

而且我的代码没有做任何花哨的事情（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（有效）

有人对此错误有任何解决方法吗？

Answer 1

测试了 Piotr Adam Milewski 评论的内容，这是一个分辨率问题。当我缩放视频以适应 1080p 比例时，它在两种设备上都有效！他提供的 linked example 对解决这个问题也很有帮助！

多个 A 帧视频仅在移动设备上显示为黑屏

A-Frame Video out of Multiple Shows Up as Black Screen only on Mobile

javascript

html

aframe

ar.js