A-Frame多视频叠加移动端仅显示黑屏问题求可行解决方案

1. 补全移动端视频必填属性 #

安卓端浏览器要求视频必须配置muted、playsinline属性才能在非全屏状态下正常播放，缺失这两个属性会直接导致黑屏。同时移除重复的autoplay属性（你已通过JS手动控制播放，重复定义易触发冲突），修改<a-assets>内的视频标签如下：

<a-assets>
    <video id="vid-1" loop crossorigin="anonymous" muted playsinline preload="auto"
           src='https://kucdinteractive.com/aomar/interactivespace/vid/LWA-ED.mp4'></video>
    <video id="vid-2" loop crossorigin="anonymous" muted playsinline preload="auto"
           src='https://kucdinteractive.com/aomar/interactivespace/vid/Test_Webv2.webm'></video>
    <video id="vid-pg4" loop crossorigin="anonymous" muted playsinline preload="auto"
           src='https://kucdinteractive.com/aomar/interactivespace/vid/Pg4-FULLSCENE(rq)_VP9.webm'></video>
</a-assets>

2. 配置透明视频材质属性 #

透明webm视频作为纹理使用时，需要显式开启材质透明属性，否则会导致alpha通道解析异常，直接显示黑屏。修改两个<a-video>标签如下：

<a-video width="1.32" height="1" rotation='270 0 0' position='0 0.5 0' src='#vid-pg4' 
         material="transparent: true; alphaTest: 0.3"></a-video>
<a-video width="1.78" height="1" rotation='270 0 0' position='0 1 0' src='#vid-2' 
         material="transparent: true; alphaTest: 0.3"></a-video>

3. 优化播放逻辑规避解码限制 #

绝大多数安卓机型最多支持同时硬解2个视频，第三个视频会触发软解失败导致黑屏。优化你的vidhandler组件逻辑，按顺序触发播放、异常自动重试：

AFRAME.registerComponent('vidhandler', {
    schema: {
      target: {type: 'string'}
    },
    init: function() {
        this.videoNodes = document.querySelectorAll(this.data.target)
        // 预加载所有视频
        this.videoNodes.forEach(vid => vid.load())
        this.toggle = false
    },
    tick: function() {
        if (this.el.object3D.visible === true) {
            if (!this.toggle) {
                this.toggle = true;
                this.playSequentially()
            }
        } else {
            if (this.toggle) {
              this.videoNodes.forEach(vid => {
                vid.pause();
                vid.currentTime = 0
              })
              this.toggle = false;
            }
        }
    },
    // 按顺序播放避免同时占满解码资源
    async playSequentially() {
        for(let i=0; i<this.videoNodes.length; i++) {
            try {
                await this.videoNodes[i].play()
            } catch(e) {
                // 播放失败延迟重试
                setTimeout(() => {
                    this.videoNodes[i].play().catch(err => console.log("视频加载失败：", err))
                }, 300)
            }
        }
    }
});

4. 调整视频编码参数 #

如果修改代码后中层视频仍黑屏，重新导出该视频：

• 优先选择VP8编码的webm格式，安卓端对VP8透明通道的兼容性远好于VP9
• 分辨率控制在1280*720及以下，帧率25-30fps，码率不超过2Mbps
• 若导出为mp4格式，需选择HEVC（H.265）编码并开启alpha通道，H.264编码原生不支持透明通道，会直接黑屏

5. 终极优化方案 #

如果多视频解码限制无法突破，将底层mp4和两层透明webm特效合并为单个带透明通道的视频，仅需解码1个视频，完全规避多视频硬解上限问题，移动端运行流畅度也会大幅提升。

内容的提问来源于stack exchange，提问作者Hyggelig Haven