Can I have a video with transparent background using HTML5 video tag

Question

We filmed a spokesperson on a green screen and have the video files ready in multiple formats    With Flash we could use the wmode transparent within the param and embed tags  but is there something similar to this with the video and source tags in HTML5  Is it even possible to properly save  m4v or  ogv videos so that we can play these files with transparent backgrounds on our browsers   Thanks

User · Answer

While this isn t possible with the video itself  you could use a canvas to draw the frames of the video except for pixels in a color range or whatever  It would take some javascript and such of course  See Video Puzzle  apparently broken at the moment   Exploding Video  and Realtime Video -  ASCII

User · Answer

At this time  the only video codec that truly supports an alpha channel is VP8  which Flash uses  MP4 would probably support it if the video was exported as an image sequence  but I m fairly certain Ogg video files have no support whatsoever for an alpha channel  This might be one of those rare instances where sticking with Flash would serve you better

User · Answer

I struggled with this  too  Here s what I found  Expanding on Adam s answer  here s a bit more detail  including how to encode VP9 with alpha in a Webm container  First  Here s a CodePen playground you can play with  feel free to use my videos for testing           lt video width  quot 600 quot  height  quot 100  quot  autoplay loop muted playsinline gt           lt source src  quot https   rotato netlify app alpha-demo movie-hevc mov quot  type  video mp4   codecs  quot hvc1 quot  gt           lt source src  quot https   rotato netlify app alpha-demo movie-webm webm quot  type  quot video webm quot  gt           lt  video gt   And here s a full demo page using z-index to layer the transparent video on top and below certain elements   You can clone the Webflow template   So  we ll need a Webm movie for Chrome  and an HEVC with Alpha  supported by Safari on all platforms since 2019  Which browsers are supported  For Chrome  I ve tested successfully on version 30 from 2013   Caniuse webm doesn t seem to say which webm codec is supported  so I had to try my way   Earlier versions of chrome seem to render a black area  For Safari  it s simpler  Catalina  2019  or iOS 11  2019  Encoding Depending on which editing app you re using  I recommend exporting the HEVC with Alpha directly  But many apps don t support the Webm format  especially on Mac  since it s not a part of AVFoundation  I recommend exporting an intermediate format like ProRes4444 with an alpha channel to not lose too much quality at this step  Once you have that file  making your webm is as simple as ffmpeg -i  quot your-movie-in-prores mov quot  -c v libvpx-vp9 movie-webm webm See more approaches in this blog post

User · Answer

Update  Webm with an alpha channel is now supported in Chrome and Firefox   For other browers  there are workarounds  but they involve re-rendering the video using Canvas and it is kind of a hack  seeThru is one example  It works pretty well on HTML5 desktop browsers  even IE9  but it doesn t seem to work very well on mobile  I couldn t get it to work at all on Chrome for Android  It did work on Firefox for Android but with a pretty lousy framerate  I think you might be out of luck for mobile  although I d love to be proven wrong

User · Answer

Yes  this sort of thing is possible without Flash     http   hacks mozilla org 2009 06 tristan-washing-machine   http   jakearchibald com scratch alphavid    However  only very modern browsers supports HTML5 videos  and this should be your consideration when deploying in HTML 5  and you should provide a fallback  probably Flash or just omit the transparency

User · Answer

Chrome 30  supports video alpha transparency     http   updates html5rocks com 2013 07 Alpha-transparency-in-Chrome-video

User · Answer

webm format is the best solution for Chrome   29  but it is not supported in Firefox IE and Safari  the best solution is using Flash  wmode  transparent    but you have to forget  ios

User · Answer

Quicktime movs exported as animation work but in safari only   I wish there was a complete solution  or format  that covered all major browsers

User · Answer

These days  if you use two different video formats  WebM and HEVC   you can have a transparent video that works in all of the major browsers except Internet Explorer with a simple  lt video gt  tag   lt video gt     lt source src  quot video webm quot  type  quot video webm quot  gt     lt source src  quot video mov quot  type  quot video quicktime quot  gt   lt  video gt   Here s a demo you can test with

User · Answer

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  Also make sure to keep video height dimension below 1400 px as some of the old iphone devices wont play videos with dimension more than 2000  This is pretty useful in safari desktop and mobile devices which doesnt support webm at this time   more details can be found in the below link https   github com m90 seeThru

[html] Can I have a video with transparent background using HTML5 video tag?

Examples related to html

Examples related to mp4

Examples related to html5-video