Highlighted

Video file for the web, with transparency

Engaged ,
Jan 12, 2019

Copy link to clipboard

Copied

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.

Views

6.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Video file for the web, with transparency

Engaged ,
Jan 12, 2019

Copy link to clipboard

Copied

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.

Views

6.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 12, 2019 0
Engaged ,
Jan 12, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 12, 2019 0
Engaged ,
Jan 13, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2019 0
Adobe Community Professional ,
Jan 13, 2019

Copy link to clipboard

Copied

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”.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2019 1
Engaged ,
Jan 13, 2019

Copy link to clipboard

Copied

https://forums.adobe.com/people/Warren+Heaton  wrote

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....

He hasn't specified how he's coding it, he just said he wanted the background from the animation he got done removed so he can "drop it on the web-site so you only see the character.". and more or less the same thing in similar wording.  But not mentioning how he's coding it.

If there was a way to export as flash with transparency in AE CC 2017 or higher I might send that too but I don't think there is and like you say flash is going. I think it's disabled by default in Firefox, and I read it doesn't work on mobile devices.

Thanks. I think I'll either send him what you mentioned or ask him first to see whether he still wants to go ahead or maybe cancel.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2019 0
Adobe Community Professional ,
Jan 13, 2019

Copy link to clipboard

Copied

What's the phrase?  Just because you can, does't mean that you should.

This might work:  Export a PNG image sequence from AE, import that into an Adobe Animate project (a .FLA), place it into a Scene, use Trace Bitmap to convert the bitmap PNG to vectors, clean up as needed, and then export to SVG image sequence.  The only step I'm not sure about is exporting to a SVG image sequence.  I've done PNG image sequences and Animation compressed QuickTime with alpha from Animate/Flash, but not SVG.

Maybe just offer to deliver a high quality, intermediate format that can be converted to whatever is needed for publishing to the web.  So, "Lossless with Alpha" from AE (audio included in the resulting file) and a PNG image sequence with a WAV file.  (Be sure to note the frame rate with the image sequence.  I usually append it to the folder name along the lines of "PNG Seq at 24fps".)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2019 1
Engaged ,
Jan 13, 2019

Copy link to clipboard

Copied

Thanks. In the end an image background was used at his request (though I don't think he was that satisfied and would likely have preferred being able to automatically place over any web background). Though your suggestion is useful for in future. I don't have Adobe Animate currently and cost is an issue.

I do think it could probably be vectorized. A problem is A) the complexity of the facial animation (it might have been done in something like Crazytalk with a sort of 3d face talking - probably a 2d cartoon type image placed over the program's 3D model face/mouth) and the fact that there are thousands of colours used. eg. an Inkscape tracing with many scans (due to the many colours) couldn't get it looking quite the same but might have been acceptable. I think a simplified version of the character animation could probably be done in Adobe Animate and that might have been acceptable since that should have allowed it to be placed over any background on the web. I just wish it would be cheaper though.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2019 0
Community Beginner ,
Jun 05, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 05, 2020 0
Adobe Community Professional ,
Jun 05, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 05, 2020 0