2

I need to show transparent videos on a-frame that work both on android and iphone. I'm using this component: https://www.npmjs.com/package/aframe-chromakey-material

This chromakey component is working perfect with mp4 videos on desktop PC, but on mobile android, chrome shows the video as a black rectangle.

Why is it working on Desktop PC with chrome, but failing on Android mobile with chrome, the code is exactly the same.

Btw I am using a button so that user clicks first to make sure video activates well on mobile. Without the chromakey component the mp4 video plays all well on mobile. It's only when I activate the shader that it goes all black only on mobile, on desktop all is good.

ok now I know whats going on , I just need help to fix it.

The problem is not a-video or a-entity, it should work ok with a-video.

reason is that in mobile the video is not being started and that's why it shows black,

when I use a-video, I start the video on user click like this:

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

and this works perfect on both desktop and mobile, when I dont use the shader material

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

but when i add the shader material:

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

now the same code to start the video on user click fails, maybe because I have two src="#video"?

how should I change the following code to start the video correctly when I have the chromakey material embedded in a-video?

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

i further simplified the line 

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

and i confirmed it, when i leave autoplay on it all works, when i remove it it fails, thats why it works on desktop and not on mobile, my code to manually trigger the video works all great when the chromakey stuff is not embedded in a-video but when i embed it then that code to manually start the video fails

Javier Gonzalez
  • 369
  • 1
  • 2
  • 9

1 Answers1

1

I found the solution, fixed , the keys here were two, first to have a single src parameter and to have it within the material, and second to correct the trigger to adapt to that,

<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();
Javier Gonzalez
  • 369
  • 1
  • 2
  • 9