Question

我需要在机架上显示透明视频，这些视频适用于Android和iPhone。我使用这个组件： https://www.npmjs.com/package/aframe-chromakey-material

这个chromakey组件在桌面PC上与mp4视频完美配合，但在移动设备上，Chrome将视频显示为黑色矩形。

为什么它在带有Chrome的台式机上工作，但在带有chrome的Android手机上失败，代码完全一样。

顺便说一下，我正在使用按钮，以便用户首先点击以确保视频在移动设备上有效激活。没有chromakey组件，mp4视频在移动设备上播放效果非常好。只有当我激活着色器时，它才会在移动设备上全黑，在台式机上一切都很好。

好了，我知道发生了什么事，我只是需要帮助来解决它。

问题不是视频或实体，它应该适用于视频。

原因是在移动设备中视频没有启动，这就是它显示黑色的原因，

当我使用a-video时，我会在用户点击时启动视频，如下所示：

＆＃13;

 var els = document.querySelectorAll('.video')
    Array.prototype.slice.call(els).forEach(function(el) {
      el.components.material.material.map.image.play()
    })

＆＃13;

当我不使用着色器材料

时，这在桌面和移动设备上都很完美

＆＃13;

<a-video id="vidactivate" class="video"  src="#video"></a-video>

＆＃13;

但是当我添加着色器材质时：

＆＃13;

<a-video id="vidactivate" class="video" material="shader: chromakey; color: 0 0 1" src="#video"></a-video>

＆＃13;

现在用户点击启动视频的相同代码失败，可能是因为我有两个src =＆＃34; #video＆＃34;？

当我在视频中嵌入了chromakey素材时，如何更改以下代码才能正确启动视频？

＆＃13;

var els = document.querySelectorAll('.video')
    Array.prototype.slice.call(els).forEach(function(el) {
      el.components.material.material.map.image.play()
    })

＆＃13;

我进一步简化了这条线

＆＃13;

  <a-video id="vidactivate" class="video" material="shader: chromakey; src: #video; color: 0 0 1"></a-video>

＆＃13;

并且我确认了，当我离开自动播放时，一切正常，当我删除它失败，这就是为什么它适用于桌面而不是移动设备，我的手动触发视频的代码工作得非常好，当chromakey的东西是没有嵌入在视频中，但是当我嵌入它时，手动启动视频的代码失败

Answer 1

我找到解决方案，修复了，这里的密钥是两个，首先要有一个src参数并将其放在材料中，然后再纠正触发器以适应它，

<a-video class="video" material="shader: chromakey; src: #video; color: 0 0 1" webkit-playsinline playsinline></a-video>

var videoEl = document.querySelector('#video');videoEl.play();

a-frame上的Chromakey组件可在桌面上运行，但在Android手机上无法运行，我该如何修复它？

1 个答案: