Sie sind nicht angemeldet.

HTML5 WebM Video with alpha

Riphur

Anfänger

  • »Riphur« ist der Autor dieses Themas

Beiträge: 44

Wohnort: France, Lille

  • Nachricht senden

1

Dienstag, 22. März 2016, 13:36

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?

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Riphur« (23. Dezember 2018, 00:16)

Leofreak

Anfänger

Beiträge: 13

  • Nachricht senden

2

Donnerstag, 16. Juni 2016, 17:40

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

Anfänger

  • »Riphur« ist der Autor dieses Themas

Beiträge: 44

Wohnort: France, Lille

  • Nachricht senden

3

Donnerstag, 16. Juni 2016, 21:32

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

Leofreak

Anfänger

Beiträge: 13

  • Nachricht senden

4

Montag, 20. Juni 2016, 15:30

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« hat folgende Bilder angehängt:
  • eg1.jpg
  • eg2.jpg

vyk

Anfänger

Beiträge: 11

  • Nachricht senden

5

Donnerstag, 19. Juli 2018, 12:00

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

Beiträge: 13 499

  • Nachricht senden

6

Sonntag, 5. August 2018, 23:22

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

Anfänger

  • »Riphur« ist der Autor dieses Themas

Beiträge: 44

Wohnort: France, Lille

  • Nachricht senden

7

Sonntag, 23. Dezember 2018, 00:50

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

Anfänger

  • »Riphur« ist der Autor dieses Themas

Beiträge: 44

Wohnort: France, Lille

  • Nachricht senden

8

Donnerstag, 3. September 2020, 10:17

Zitat von »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!

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Riphur« (16. September 2020, 14:17)

Viktor123

Anfänger

Beiträge: 8

Wohnort: Baden

Beruf: Kellner

  • Nachricht senden

9

Mittwoch, 16. September 2020, 12:35

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

Greetings

Crazy Homeless Guy

Schüler

Beiträge: 50

  • Nachricht senden

10

Mittwoch, 16. September 2020, 22:08

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/


Zitat von »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!

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Crazy Homeless Guy« (16. September 2020, 22:25)

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

11

Freitag, 25. September 2020, 11:27

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

Anfänger

  • »Riphur« ist der Autor dieses Themas

Beiträge: 44

Wohnort: France, Lille

  • Nachricht senden

12

Freitag, 25. September 2020, 14:45

Thanks Klaus !

thatkeith

Schüler

Beiträge: 82

Wohnort: London

  • Nachricht senden

13

Montag, 12. Oktober 2020, 13:56

Zitat von »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

Anfänger

Beiträge: 50

  • Nachricht senden

14

Freitag, 16. Oktober 2020, 17:19

Zitat von »klaus.krpano«


Zitat von »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

Beiträge: 13 499

  • Nachricht senden

15

Freitag, 16. Oktober 2020, 23:12

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

Anfänger

Beiträge: 50

  • Nachricht senden

16

Samstag, 17. Oktober 2020, 11:14

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

Ähnliche Themen