You are not logged in.

HTML5 WebM Video with alpha

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Riphur

Beginner

  • "Riphur" started this thread

Posts: 37

Location: France, Lille

  • Send private message

1

Tuesday, March 22nd 2016, 1:36pm

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/PSPE/1603…Video/tour.html

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

This post has been edited 3 times, last edit by "Riphur" (Dec 23rd 2018, 12:16am)

Leofreak

Beginner

Posts: 13

  • Send private message

2

Thursday, June 16th 2016, 5:40pm

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

Riphur

Beginner

  • "Riphur" started this thread

Posts: 37

Location: France, Lille

  • Send private message

3

Thursday, June 16th 2016, 9:32pm

The videos webm already works in VR with Google Chrome. I think ca also works with the alpha.

Leofreak

Beginner

Posts: 13

  • Send private message

4

Monday, June 20th 2016, 3:30pm

Thanks for the quick response!

The thing is, when I open your example in Chrome and go into VR, the videos disappear. (See eg1 and eg2)

Thank you very much for your help
Fabian
Leofreak has attached the following images:
  • eg1.jpg
  • eg2.jpg

vyk

Beginner

Posts: 11

  • Send private message

5

Thursday, July 19th 2018, 12:00pm

Hi everyone !

unfortunatelly webm videos and vp8 codec is not (again an again) supported by apple devices !
758 days after the last answer, still no solution...

maybe an implementation of this could be possible ?
http://jakearchibald.com/scratch/alphavid/
and how to do it : http://www.sciencelifeny.com/transparency/transparency.html


regards vYk

klaus.krpano

Administrator

Posts: 12,884

  • Send private message

6

Sunday, August 5th 2018, 11:22pm

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

Riphur

Beginner

  • "Riphur" started this thread

Posts: 37

Location: France, Lille

  • Send private message

7

Sunday, December 23rd 2018, 12:50am

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)

Riphur

Beginner

  • "Riphur" started this thread

Posts: 37

Location: France, Lille

  • Send private message

8

Thursday, September 3rd 2020, 10:17am

Quoted from "klaus.krpano"

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!

This post has been edited 1 times, last edit by "Riphur" (Sep 16th 2020, 2:17pm)

Viktor123

Beginner

Posts: 8

Location: Baden

Occupation: Kellner

  • Send private message

9

Wednesday, September 16th 2020, 12:35pm

Thanks for that!
I think this is really cool and will try it out myself

Greetings

Crazy Homeless Guy

Beginner

Posts: 35

  • Send private message

10

Wednesday, September 16th 2020, 10:08pm

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/index.php?p…&threadID=17507
https://simpl.info/videoalpha/


Quoted from "Riphur"

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!

This post has been edited 2 times, last edit by "Crazy Homeless Guy" (Sep 16th 2020, 10:25pm)

klaus.krpano

Administrator

Posts: 12,884

  • Send private message

11

Friday, September 25th 2020, 11:27am

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

Riphur

Beginner

  • "Riphur" started this thread

Posts: 37

Location: France, Lille

  • Send private message

12

Friday, September 25th 2020, 2:45pm

Thanks Klaus !

thatkeith

Trainee

Posts: 79

Location: London

  • Send private message

13

Monday, October 12th 2020, 1:56pm

Quoted from "klaus.krpano"

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

lerayfle

Beginner

Posts: 36

  • Send private message

14

Friday, October 16th 2020, 5:19pm

Quoted from "klaus.krpano"


Quoted from "klaus.krpano"

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

klaus.krpano

Administrator

Posts: 12,884

  • Send private message

15

Friday, October 16th 2020, 11:12pm

Hi,

that's not a 'transparent MP4' (such thing doesn't exist), that's a normal video with a top-bottom layout: top=the actual videoframe, bottom=grayscale-alpha-mask.

Here a direct link to the video used in that example:
https://s3-us-west-2.amazonaws.com/s.cdp…ceships.mp4?t=1

Such video can be also used with the next krpano release 1.20.9.

Best regards,
Klaus

lerayfle

Beginner

Posts: 36

  • Send private message

16

Saturday, October 17th 2020, 11:14am

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

Similar threads