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: 27

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: 27

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,458

  • 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: 27

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)

Similar threads