No Alpha Channel Video Format capable working on iOS / Apple devices

[javismiles]

Currently using the latest versions on PC/Mac/Android/iPhone My issue is about video formats. Webm works great but it's not accepted by Apple/iOS. So I'm looking for an alternative video format that supports Alpha Channel for Apple. I have tried MOV but it is not playing with aFrame. What video format does aFrame accept that has alpha channel and is accepted by iOS devices?

It also seems impossible to find anywhere which are the video formats supported by a-Frame.

The only alternative I found for apple was to use animated gifs with the plugin from mayognaise, but that has a big issue, flickering caused when clearing the canvas in between each frame.

It would really be great if you actually told me that there is a alpha channel capable video format supported that works on iOS, as I say documentation about the video formats seems impossible to find

Thank you

[javismiles]

at the end of the day what I need is with a very short video, use alpha transparency that works on both android and iOS, I Can use a video format , I can use animated GIFS, I can use mp4 and mask out the background color which is constant if that's a possibility, but there must be a way, in android it's so easy with Webm, but ive been all day researching and I cannot find anywhere any way in Safari iOS to put in A-Frame a video with alpha transparency that is recognized by A-Frame and Safari/iOS,

Video formats: Webm for Android, for safari iOS? Animated GIFS: The animated gif component has unsolved issues with flickering after clearing canvas in between each frame Masking out the background of an mp4: no idea if this is possible

any tips? than you again

[machenmusik]

Is this an A-Frame issue, or a question? IIRC, questions should usually be directed to stackoverflow.com; it sounds as though you are looking for a specific answer on Safari browser video support.

As I understand it, the usual technique is to use a custom shader to make the desired color from the video transparent / not visible.

[javismiles]

Thank you machenmusik, I will redirect this to slack or other forums then, btw I did exactly that now and it works, an mp4 video with a chromakey shader and that works, however the mp4 video shows well on desktop but shows black rectangle on android

I just checked that mp4 works all well in both desktop and android mobile, it is the addition of the chromakey material that fails on android mobile but works on desktop

[machenmusik]

You may need to check the shader for assumed features or extensions unavailable on mobile. A codepen / gist / jsfiddle / glitch example can help others examine

[dmarcos]

@javismiles It seems you're using https://github.com/nikolaiwarner/aframe-chromakey-material. Open an issue there will be also useful. You will have to share a working example and also some information about the video.

I don't see anything exotic in the shaders of the chroma key material. https://github.com/nikolaiwarner/aframe-chromakey-material/blob/master/index.js

[javismiles]

thank you dmarcos, I just raised the issue, and I also discovered something very key:

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>

[javismiles]

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

[dmarcos]

You mentioned that iOS was working right? Is the issue exclusive to Android?

[javismiles]

I could not test on iOS yet, im sure the same problem happens. But listen, I found the reason now, the last stuff I wrote. It's just that when I embed the material in the a-video

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

my code to start playing the video fails. That's why it works on desktop (where autoplay works), but not on mobile because on mobile user has to click and the play has to be done manually, and that code to manually play the video is failing

[javismiles]

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

[javismiles]

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

[machenmusik]

What is the javascript code you are using to manually start the video file? A very common mistake to make is that the a-video element does not have the API for media control, that's on the video element. So here you would do something like document.querySelector('#video').play() not #vidactivate

[javismiles]

Thank you machenmusik, I fixed it now, 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, this second one connects with what you just described, <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(); thank you for your support and i will close this issue now, all best ;)

[AndreaMonzini]

Hello @javismiles Good that you have found a solution, alternatively have you evaluated APNG?

APNG support is increasing: https://caniuse.com/#feat=apng

By the way I'm trying to test video ( without alpha) with iOs® using webkit-playsinline and playsinlinebut the video does not start, do you have a working example ( with and without alpha)? Thank you.

[KRVaghani]

hello... how to play .mov hevc with alpha video in safari browser useing html5????

[KRVaghani]

Currently using the latest versions on PC/Mac/Android/iPhone My issue is about video formats. Webm works great but it's not accepted by Apple/iOS. So I'm looking for an alternative video format that supports Alpha Channel for Apple. I have tried MOV but it is not playing with aFrame. What video format does aFrame accept that has alpha channel and is accepted by iOS devices?

It also seems impossible to find anywhere which are the video formats supported by a-Frame.

The only alternative I found for apple was to use animated gifs with the plugin from mayognaise, but that has a big issue, flickering caused when clearing the canvas in between each frame.

It would really be great if you actually told me that there is a alpha channel capable video format supported that works on iOS, as I say documentation about the video formats seems impossible to find

Thank you

same flickring problem available in .mov HEVC with alpha channel