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

html mp4 html5-video
DavidE picture DavidE · Nov 1, 2010 · Viewed 137.2k times · Source

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

Answer

Lie Ryan picture Lie Ryan · Nov 5, 2010

Yes, this sort of thing is possible without Flash:

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

Related questions

Playing MP4 files in Firefox using HTML5 video

I have searched around quite a bit but have not solved my problem. I have a video tag running as follows: <video class="ne" src="{{ page | video_url }}" muted="true" volume="0" controls width="720" height="480" poster="{{ page | video_poster_image_…

Read More
How to embed .h264 video file in html webpage using video tags

I am trying to play .h264 file in browser, Trying to accomplish this using html video tags. The result is always an empty frame. I did check some links on web, They recommend to play the video in .mp4 container. …

Read More
HTML5 Video (both webm and MP4) are showing a blank white screen and aren't playing

I've done an hour of googling but I either suck at it, or it isn't a common issue. Here's my video tag: <video class="video-background" preload="none" loop="loop" autoplay="autoplay"> <source src="/resource/video/ripples.webm" …

Read More