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

【问题标题】：A-Frame Video out of Multiple Shows Up as Black Screen only on Mobile多个 A 帧视频仅在移动设备上显示为黑屏
【发布时间】：2021-12-22 10:36:06
【问题描述】：

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

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

后面的视频是<a-plane> 上的mp4 作为material
中间是我在 After Effects 中创建的 .webm 文件，位于 <a-video>
前面的视频也是我在 After Effects 中创建的 .webm 文件<a-video>

IMG: On Mobile

IMG: On Pc

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

我浏览了一些 github/stackoverflow，发现帖子讨论了一个类似的问题（这显然是一个长期存在的问题），但没有一个修复/解决方法真正奏效。

我找到的资源：

我的代码并没有做任何花哨的事情（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（无工作）
测试的 PC 浏览器：Chrome、Edge、Firefox（已使用）

谁有解决这个问题的办法？

【问题讨论】：

Works with other videos（点击三个webms播放）。我的手机肯定讨厌5333 x 4033 视频。不知道其他的，工作的编解码器是VP8，而你的编解码器是VP9。您是否尝试按照控制台日志中的提示进行操作（OES_texture_float_linear 问题）？
@PiotrAdamMilewski Works with other videos example: 这个例子真的很有帮助，谢谢！！！我会尝试用我的视频重新创建它，看看错误是否仍然存在。 Resolution: 是的，我选择了那个分辨率，因为它与我计划放置标记的表面的比例相匹配。尽管从您的评论来看，这可能是问题的一部分。 Logs:我没有看到那个错误。如果你愿意，你能把截图发给我，以便我进一步研究吗？谢谢！！ :D

标签： javascript html aframe ar.js

【解决方案1】：

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

【讨论】：