HTML5 WebM Video with alpha

  • Hello everyone,

    I just share with you some research on the WebM format so have compatible HTML5 video containing an alpha channel.

    Having a project with a video of a person filmed on green screen, I needed a solution.

    After a tour of the web, WebM VP8-encoded is capable of containing an alpha channel. The VP9 seems to be able also, but is not supported by the web browser.

    I have not found a simple solution to WebM VP8 encoding preserving the alpha. The only program that gave results is FFmpeg.

    My source is a .mov video containing an alpha channel and encoded in png & mp3.
    You must then use FFmpeg with DOS command lines, like :

    ffmpeg -i input.mov -c:v libvpx -pix_fmt yuva420p out.webm

    The result is a WebM file with alpha.

    However, the solution only works with Chrome.
    Firefox (Nightly build), alpha does not work, but the video is played anyway.
    With IE, the intergalactic void :D

    A quick test: http://www.c360.fr/ftp/Projets/PS…Video/tour.html

    If anyone has experienced with alpha video in HTML5, is there any other solutions?

    Edited 3 times, last by Riphur (December 23, 2018 at 12:16 AM).

  • Hey Riphur

    I really like your example *thumbsup* . I was actually going to make something similar in an upcoming project.
    My question is, have you found a way of switching into the VR mode without the video disappearing?

    Would love to have a solution for this.

    Cheers
    Fabian

  • Hi, after a loooong time.

    Still no solution in sight for videos with alpha under html5 / webgl in mp4 or webm?
    Klaus, the video example, KrPano can read it properly by including the alpha channel below?
    If you only need to put the alpha channel under the video, it's pretty easy! (or I did not understand: p)

  • Hi,

    that example is using a special video with double-height where the upper parts contains the normal video and the lower one the alpha channel:
    https://jakearchibald.com/scratch/alphavid/compressed.mp4

    Yes, might be a possibility to support such videos and images (WebGL only)... but are there tools to create such videos?

    Best regards,
    Klaus

    Hi !


    After a few years, it seems that there is still no html5 video solution supporting alpha.

    There are some alternatives like .apng but it is very uncompressed.


    You said in your previous post that the demo with the "double height" video including alpha can be supported by KrPano. Could you tell us more about how to integrate it into the videoplayer?


    Because the creation of this kind of file is not really a problem.


    Thanks in advance!

    Edited once, last by Riphur (September 16, 2020 at 2:17 PM).

  • Maybe a 3rd party can write a video player plugin. WebM supports alpha, but the default KRPano video plugin isn't capable of interpreting the alpha in WebM video. Here is some research I did a few months ago.

    https://krpano.com/forum/wbb/inde…&threadID=17507
    https://simpl.info/videoalpha/


  • Hi,

    it's not about the videoplayer, it's about the rendering - currently always RGB instead of RGBA textures are used for videos to save GPU memory.

    There will be an option in the next release to tell the krpano viewer that the video has an alpha-channel (but keep in mind that such videos wouldn't work in iOS) and also other new options for transparent videos that will work everywhere.

    Best regards,
    Klaus

  • There will be an option in the next release to tell the krpano viewer that the video has an alpha-channel (but keep in mind that such videos wouldn't work in iOS) and also other new options for transparent videos that will work everywhere.

    This is fantastic news! I know we have to wait for the next release, but hearing that this will soon (or at least soon-ish) be possible is really encouraging.

    k

  • Hi,

    it's not about the videoplayer, it's about the rendering - currently always RGB instead of RGBA textures are used for videos to save GPU memory.

    There will be an option in the next release to tell the krpano viewer that the video has an alpha-channel (but keep in mind that such videos wouldn't work in iOS) and also other new options for transparent videos that will work everywhere.

    Best regards,
    Klaus

    This codepen (using a "transparent" mp4) seems to work on my iPhone (click [Play] to launch video), would it mean such videos can also work on iOS ? (I have an old iPhone, nothing like I can test all iOS versions see if it works)

    Florian

  • Great!
    Sometimes I went across left/right split instead of top/bottom. Could you make that configurable on krpano side?
    Else no big issue, it should be modifiable with ffmpeg to cope with krpano choice.
    Thx

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!