I can say that FFmpeg has helped me reduce video file sizes over 10 times without any visible image quality degradation. It is an extremely powerful open source multimedia framework, and if you have anything to do with multimedia files, I’d recommend starting there because it’s capable of so many things. If you want to create, convert, or even edit video files, FFmpeg is your friend. We will start with the easy part: creating a WebM file. Detect for Safari (and the version) to serve the correct format.So I decided to use the hybrid solution: HEVC for Safari and WebM for other browsers. It seemed to provide the same functionality as WebM but with support on Apple devices. Thankfully, I found a video from WWDC 2019 announcing HEVC video with Alpha support for Safari starting in iOS 13 and macOS Catalina. While my video was working perfectly on Chrome, Firefox and Edge, Safari greeted me with an ugly black background. Unfortunately, Safari (iOS and macOS) doesn’t support transparency in WebM. As soon as I opened the website on my iOS Phone I realized that I should’ve started with checking the browser compatibility. I was even more convinced after converting my image sequence to WebM because, while GIF was weighing in at 5.8 MB, WebM with transparency,using the same frame rate and full colors was only 540 KB! That’s more than 10 times smaller while offering better performance and quality. I went through the article and it immediately felt like the way to go. It even shows an example and shares tips on how to use it. I found an article about alpha transparency in Chrome video published in 2013, which announces Google Chrome support for WebM with an alpha channel. WebM with alpha transparencyĪs all the formats for failed here, I started looking into videos. I’ll get back to that at the end of the article. I quickly abandoned that idea, but it turned out to be useful later. But it requires using a lot of data transfer (each video frame would be a separate image) and resources to animate (you could drain a user’s battery quickly or make their computer fan go crazy). Next, a crude, but working, idea came to mind: use a bunch of PNGs and loop through them with JavaScript to imitate the video. While it seemed like the way to go for a moment, I was not satisfied with its file size and performance.įun fact: Apple adopted the APNG format as their preferred format for animated stickers in iOS 10 iMessage apps. It is supported by popular browsers, but no support in Internet Explorer 11 (yup, some people still have to support that). If APNG is not supported, the first frame is displayed. It is also backward-compatible with regular PNG. (I didn’t even know it existed, did you?) APNG works similarly to animated GIF files while supporting 24-bit images and 8-bit transparency. The next option I’ve looked at was APNG, which for some reason, is not as popular as GIF but is much better. While it works perfectly for simple and small animated graphics, it is not that great for colorful, long video footage, it has limited color space, and will grow a lot in size for complex videos. Even though the GIF format was introduced over 30 years ago, it is still widely used. To achieve this effect, I started with a search for a ny kind of solution that would allow me to insert animated content with transparent background on the page. It is a slider advertising dog food with a real video of a dog on the overlay and I’m sure that realistic, cute dog would improve the conversion rate! ![]() The idea is to integrate video with interactive content underneath so that the content behind the video changes as the slider is advancing. ![]() To see how transparent video overlays work, I’ve prepared an example that I hope feels both fun and relatable. But it is often easier to use a since they can be rather efficient and, with them, just about anything visual is possible.īut what if you a need transparent background on that video, so that it could overlay and appear to interact with other content on the page? It’s possible, but can be tricky, especially cross-browser. There are many ways to do that from CSS transitions to 3D rendering on canvas, and animated SVG. As websites are becoming more and more dynamic when it comes to design, there is sometimes a need to incorporate complex, animated elements.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |