Skip to main content
A
A.I.1
Brainiac
January 13, 2019
Question

Video file for the web, with transparency

  • January 13, 2019
  • 2 replies
  • 11947 views

There's someone who wants to convert a video with a cartoon man talking against a white background, with audio, so that it is over a transparent background so it can be used on web sites and placed against any background. The video has a zoom in slowly to tthe character and most of the character movement is in the head.

Could anyone tell me the easiest and best way for this to be done please?

WebM (with vp8) can apparently support transparency in a version of Chrome (Google Chrome alpha transparency screencast - YouTube ) but I'm not sure if that's all current versions of Chrome.

I also read this thread: mp4 - Can I have a video with transparent background using HTML5 video tag? - Stack Overflow

where it says "Quicktime movs exported as animation work but in safari only"

The above link also says "Mp4 files can be playable with transparent background using seeThrou Js library. All you need to combine actual video and alpha channel in the single video".

There's a plugin to export an SVG video from After Effects but that would require re-creating the cartoon and the face animation would probably not be easy I think.

I don't think I can use gif because of the audio and syncing to the audio that is required.

--

Could someone please let me know the best way to do this? Create webM (vp8) for Chrome and quicktime mov with transparency for Safari (eg. created with AE CC 2017 - though would that still work with browsers with what has happened with quicktime?)? And/or export a version of the video with the white background converted to alpha (transparent) andask the person to use "seeThrou JS library"? Or something else? Maybe different methods could be done for different browsers through detecting the browser.

This topic has been closed for replies.

2 replies

Awesome_determination0D4D
Awesome_determination0D4D
Known Participant
June 5, 2020

No rocket science here. I have done it on my webpage - www.santanu.biz (click home or refresh if for some reason you cannot see the video). Just convert your green screen footage using PPro or AE with vp8 codec and render 32 bit alpha. As cake walk as that.

R
Rick Gerard
Adobe Expert
June 6, 2020

The problem with Google's VP8 codec is that it does not work with all devices or browsers, or web pages. The requirements are very specific and if you want it to show up on your clients iPad, it won't. You have to do something else. VP8 will not work with a simple media player embedded in a web page unless the person browsing uses Google Chrome.

A
A.I.1Author
Brainiac
January 13, 2019

Am I best using the "bodymovin" After Effects extension, with maybe converting the cartoon video to vector with the help of Inkscape (though that might be complex/a lot of frames to convert to vector with Inkscape for the face animation).

Or is there something a lot simpler? eg. am I better using one of the above non-vector methods?

A
A.I.1Author
Brainiac
January 13, 2019

Is it worth sending a version in webm (vp8) format + alpha transparency, quicktime png + alpha, png sequence (with alpha) and maybe h264 with separate video files main and alpha channels or is that likely going to not what they want? It seems like the animation is probably too complex for doing with the "bodymovin" extension.

Should I just explain the different options to the person and see what he wants to do? Is sending what I specified above (webm etc.) likely to be no use or is it workable if enough browser checks are done and the best format for a particular browser are used?

W
Warren Heaton10841144
Brainiac
January 13, 2019

What is the person using to code the web content?  What you describe is supported and easy for something like the Shcokwave Flash web browser plug-in or for wired QuickTime movie files, but not for HTML alone.  Of course those browser plugins are going away or gone.

If the person can’t provide exact delivery specs (ideally before you start working as to avoid open-ended work), the best you can do is give them the common formats that support transparency or formats that allow you to pair rgb/alpha later.

I would add a few audio only files to your delivery list (wav, aif, mp3) along with a note, “Let me know if you neeed anything else”.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices