a-frame上的Chromakey组件在桌面上可以工作，但在android手机上失败，我如何修复它？

Question

我需要在一个框架上显示透明的视频，在android和iphone上都可以工作。我正在使用这个组件：https://www.npmjs.com/package/aframe-chromakey-material

在桌面PC上，这个色键组件可以完美地处理mp4视频，但在移动安卓系统上，chrome会将视频显示为黑色矩形。

为什么它可以在桌面电脑上使用chrome，但在Android手机上却不能使用chrome，代码完全相同。

顺便说一句，我正在使用一个按钮，以便用户首先点击，以确保视频在移动设备上激活良好。在没有色键组件的情况下，mp4视频在移动设备上可以很好地播放。只有当我激活着色器时，它才会变成黑色，只有在移动设备上才会变黑，而在桌面上一切都是好的。

好了，现在我知道是怎么回事了，我只是需要帮助来修复它。

问题不是-video或-实体，它应该可以与-video一起工作。

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

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

​

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

​

当我不使用着色器材质时，这在桌面和移动设备上都能完美地工作

​

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

​

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

​

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

​

现在，在用户点击时启动视频的代码失败了，可能是因为我有两个视频“#src=”？

当我将色键材料嵌入到- video中时，我应该如何更改以下代码才能正确启动视频？

​

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

​

我进一步简化了这条线

​

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

​

我确认了这一点，当我离开自动播放它所有的工作，当我删除它失败，这就是为什么它工作在桌面上，而不是在移动设备上，我的代码手动触发视频都很好，当色键的东西没有嵌入在- video中，但当我嵌入它时，手动启动视频的代码失败

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();

​