2

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

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

为什么它可以在带有 chrome 的台式机上运行，​​但在带有 chrome 的 Android 手机上却失败了，代码完全相同。

顺便说一句，我正在使用一个按钮，以便用户首先单击以确保视频在移动设备上很好地激活。如果没有 chromakey 组件，mp4 视频在移动设备上播放效果很好。只有当我激活着色器时，它才会在移动设备上全黑，在桌面上一切都很好。

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

问题不是视频或实体，它应该可以与视频一起使用。

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

当我使用 a-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>

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

4

1 回答 1

1

我找到了解决方案，fixed，这里的关键是两个，第一个是有一个 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();

于 2017-10-31T01:29:02.217 回答