javismiles
commented
7 years ago I found something new,
If i use the chromakey material within the <a-video> element, the problem happens
If i use it within a <a-entity> element, then the problem does not happen.
So with <a-entity> all works well, but with<a-video> it fails.
I would prefer to use it with <a-video> it would be better for me for a few reasons, any idea why it works with a-entity but fails with a-video?
This works on both android mobile and desktop:
<a-entity material="shader: chromakey; src: #video; color: 0 0 1" geometry="primitive: box"></a-entity>
This works on desktop but fails on android mobile:
<a-video class="video" src="#video" webkit-playsinline playsinline width=1 height=1 position="0 0 0" rotation="0 0 2" material="shader: chromakey; src: #video; color: 0 0 1" autoplay="true" loop="true"></a-video>
I need to show transparent videos on a-frame that work both on android and iphone. I'm using your 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.
This happens with any mp4 video. The video uses H264 codec. Resolution is 1500x1500, no errors on console. Without the shader active, the mp4 video shows perfectly on both mobile and desktop. With the chromakey shader active, the video shows great without background on desktop but on mobile it shows a black rectangle and it fails