Menu
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
856
The only way to create a video with a transparent background is to have it initially shot in front of a green screen. Once you upload a green screen video to VSDC (or any other video editor that has the Chroma Key tool), you can remove the green color from it, thus leaving the background transparent.
Create your video with transparency in a video editing program like Premiere, Final Cut or Rotato. Convert that video to HEVC With Alpha and WebM. Upload those videos to a web server. Embed the videos on your website using the video tag with two source children tags.
Transparency plays an important role in front end development. It lets you choose how transparent the elements on your web pages appear. You can adjust transparency in several ways – because of course, in CSS, there are multiple ways to do the same thing.
The file types that currently support an Alpha (transparency) channel are FLV, F4V, AVI, Quicktime, and WebM. If you're using free programs, you may find they can export in these formats. Often, there will be a named codec for an Alpha channel within the settings of these, or a PNG option.
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).
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
