webm safari alpha

WebM video format

Multimedia format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video. WebM supports the video codec VP8 and VP9.

• 4 - 5 : Not supported
• 6 - 24 : Partial support
• 25 - 126 : Supported
• 127 : Supported
• 128 - 130 : Supported
• 12 - 13 : Not supported (but has polyfill available)
• 14 - 18 : Partial support
• 79 - 126 : Supported
• 3.1 : Not supported
• 3.2 - 5.1 : Not supported (but has polyfill available)
• 6 - 12 : Not supported (but has polyfill available)
• 12.1 - 13.1 : Partial support
• 14 : Partial support
• 14.1 - 15.6 : Partial support
• 16.0 - 17.4 : Supported
• 17.5 : Supported
• 17.6 - TP : Supported
• 2 - 3.6 : Not supported
• 4 - 27 : Partial support
• 28 - 128 : Supported
• 129 : Supported
• 130 - 132 : Supported
• 9 - 10.5 : Not supported
• 10.6 - 15 : Partial support
• 16 - 110 : Supported
• 111 : Supported
• 5.5 - 8 : Not supported
• 9 - 10 : Not supported (but has polyfill available)
• 11 : Not supported (but has polyfill available)

Chrome for Android

Safari on ios.

• 3.2 - 12.1 : Not supported
• 12.2 - 13.7 : Partial support
• 14 - 17.3 : Partial support
• 17.4 : Supported
• 17.6 - 18.0 : Supported

Samsung Internet

• 4 : Partial support
• 5 - 24 : Supported
• 25 : Supported
• all : Not supported

Opera Mobile

• 10 - 12.1 : Not supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 2.2 : Not supported
• 2.3 - 4.4.4 : Partial support

Firefox for Android

• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

Overlaying Video With Transparency While Wrangling Cross-Browser Support

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

As websites are becoming more and more dynamic when it comes to design, there is sometimes a need to incorporate complex, animated elements. There are many ways to do that from CSS transitions to 3D rendering on canvas, and animated SVG. But it is often easier to use a <video> since they can be rather efficient and, with them, just about anything visual is possible.

But 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. Let’s explore that.

Here’s an example

To see how transparent video overlays work, I’ve prepared an example that I hope feels both fun and relatable. The idea is to integrate video with interactive content underneath so that the content behind the video changes as the slider is advancing. 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!

You can follow along with this article to recreate this demo by yourself. Part of what you’ll need to create a video like this is an “image sequence” (a bunch of alpha-transparent images we’ll stitch together into a video). I’m providing the images I used for the example.

Exploring possibilities

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.

The first thing that came up was a GIF. Even though the GIF format was introduced over 30 years ago, it is still widely used. Unfortunately, it has its limitations. 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.

The next option I’ve looked at was APNG , which for some reason, is not as popular as GIF but is much better. (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. It is also backward-compatible with regular PNG. If APNG is not supported, the first frame is displayed. It is supported by popular browsers, but no support in Internet Explorer 11 (yup, some people still have to support that). While it seemed like the way to go for a moment, I was not satisfied with its file size and performance.

Fun fact: Apple adopted the APNG format as their preferred format for animated stickers in iOS 10 iMessage apps.

Loop through PNGs

Next, a crude, but working, idea came to mind: use a bunch of PNGs and loop through them with JavaScript to imitate the video. 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).

I quickly abandoned that idea, but it turned out to be useful later. I’ll get back to that at the end of the article.

WebM with alpha transparency

As all the formats for <img> failed here, I started looking into videos. I found an article about alpha transparency in Chrome video published in 2013, which announces Google Chrome support for WebM with an alpha channel. It even shows an example and shares tips on how to use it. I went through the article and it immediately felt like the way to go. 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. Awesome!

The joy did not last long though. As soon as I opened the website on my iOS Phone I realized that I should’ve started with checking the browser compatibility. Unfortunately, Safari (iOS and macOS) doesn’t support transparency in WebM. While my video was working perfectly on Chrome, Firefox and Edge, Safari greeted me with an ugly black background.

The search continues…

A good Solution

Thankfully, I found a video from WWDC 2019 announcing HEVC video with Alpha support for Safari starting in iOS 13 and macOS Catalina. It seemed to provide the same functionality as WebM but with support on Apple devices. So I decided to use the hybrid solution: HEVC for Safari and WebM for other browsers.

It seems like the perfect solution. But now we have two tasks:

• Create an HEVC with alpha-transparency
• Detect for Safari (and the version) to serve the correct format

Creating a transparent video

We will start with the easy part: creating a WebM file. If you want to create, convert, or even edit video files, FFmpeg is your friend. 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 . I can say that FFmpeg has helped me reduce video file sizes over 10 times without any visible image quality degradation. But let’s get back to transparency.

In my experience, if you need to include animated elements into website layout, you get them as a set of video frames in PNG. Even while working on my example project, a tool that removes background from videos generated a set of images for me. So I will continue here assuming we’re building the video from a set of images (remember, you can download our set ), but even if you’ve got a video file instead, the process will look similar (adjust FFmpeg options to your needs).

We are now ready to create a video. Using the command line, we’ll navigate to the folder that contains the PNG files and run the following command:

You can adjust the arguments to fit your needs:

• framerate : how much images will be used for 1s of the output video
• -i unscreen-%3d.png : input file name and format. My files have numbers from 001 to 150 so i used %3d as a mask to select all files with three digits in the name.
• -c:v : specifies the codec to use. I want the video to be encoded with VP9, which is supported by most web browsers .
• -pix_fmt : specifies pixel format to be used. In our cas, it should support an alpha channel. You can see all supported formats if you run ffmpeg --pix_fmts .
• output.webm : provides the desired output file name as a last argument

There are a lot more options available , but I won’t dive into details as it would take probably more than one article to go through them. Those provided in the example command work fine for our use case.

After the process is finished, we should see a new output.webm file, and if you open it in a supported browser, you’ll see a video. Easy, right?

Creating HEVC Alpha

Since we have a WebP file ready, it’s time to move to the second format we will be using: HEVC with alpha transparency . Unfortunately, at the time of writing, FFmpeg doesn’t support HEVC, so we have to use another tool. As far as I know, the only way to create HEVC with alpha is to use the Finder or Compressor on Mac. If you have a PC, you’ll probably have to ask someone with Mac to do it for you. The Compressor app is only provided with Final Cut Pro, so I won’t be using it, although it may be worth considering if you need custom settings.

Since macOS Catalina, the Finder has a built in Encode Media tool to convert videos. It is simple (and free), so it feeds our needs.

The Finder expects a video file as an input, so first, we have to convert the image sequence to ProRes 4444 . This is an important step, as the Encode Media tool won’t accept just any video — it will fail unless you provide the format it accepts. It gave me a headache or two until I found out the correct encoding for the input file.

We can create input video using FFmpeg. As we did when creating WebM, we just have to run FFmpeg with the proper arguments:

From this point on, a Mac is needed. But the process is simple and does not involve typing anything in terminal, so even if you ask a non-techy friend with a Mac to do it for you, I’m sure they can manage.

Having ProRes4444 video ready, you can navigate to the containing folder in Finder, right-click on it, and in the context menu, select Encode Selected Video Files .

A window will appear. Select the desired HEVC quality (there are two to choose from), and check the option to Preserve Transparency. Then click the “Continue” button.

After a moment you should see a new file, which is encoded in HEVC with alpha. It’s done! Opening this file in Safari confirm that the transparency works.

Last but not least, it’s time to use videos on the website!

Serving transparent videos for all browsers

We can use <video> element to serve videos. If the browser supports the given format in the src attribute, it will just work. But as I’ve mentioned, we need to serve HEVC for Safari and WebM for other browsers.

There is one more thing to take care of: some browsers support WebM or HEVC itself but without transparency . Those browsers will play the video but with a black background instead of an alpha channel. For example, Safari 12 will play HEVC without transparency. That’s unacceptable for us.

Normally, I’d use the <source /> element to provide the video along with multiple formats as fallbacks, and the browser would pick the one it supports. However, since we want to show HEVC only on specific Safari versions, we will have to set the video src attribute instead using JavaScript.

HEVC with transparency is supported in iOS 13 and Mac Safari 13, so let’s start by detecting those. The recommended way to adjust website features based on support is by detecting the existence of an API rather than looking at the User Agent, but I didn’t find any simple way to detect if the browser supports transparency in video format. Instead, I came up with my own solution. It’s not pretty, but it does the job.

This targets Safari 13 and above by looking at navigator.mediaCapabilities , which is not supported in older versions, as well as looking that the browser is Safari at all. If the function returns true , then I’m good to go with HEVC alpha. For any other case, I’ll load WebM video.

Here’s an example of how this comes together in HTML:

If you’re curious about those loop muted autoplay playsinline arguments on video element, those are about replicating a GIF-like experience:

• Without muted , the video will not play without user interaction.
• With playsinline , on iOS, the video plays right where it is in the layout instead of opening up in fullscreen.
• With loop , the video repeats over and over.
• With autoplay , it will start playing the video automatically on page load (as long as we also have muted in place).

That’s it! We have a lightweight, performant and high-quality solution for transparent videos, that works on most modern browsers (at least the last two recent versions of Chrome, Firefox, Safari and Edge). We can add some basic HTML and CSS to integrate static content with it and make it a little bit more real-life, or just use the same idea that’s in my demo. That wasn’t too bad, was it?

Hey, but what about IE 11? My whole company is using it!

In general, I’d recommend limiting a feature like this to modern browsers and hiding the video in IE. The video is probably not a critical element of the website. Although, I used to work on a commercial project where IE 11 support was a must and I was forced to figure something out to show the transparent video there. In the end, I ended up cycling through PNG images with JavaScript. I reduced the amount of frames and switched between them using a timer. Sure, the performance was awful, but it worked. The video was quite important to the whole design so we intentionally decided to sacrifice performance on IE 11 to provide the full experience.

I hope that I’ve saved you some time researching the idea of alpha-transparent video and that now you’re be able to incorporate animated elements like this on your website. I bet you’ll need it someday!

Do you have a different idea of how to use transparent video? Or maybe some experience with that already? Let me know in the comments.

Maybe just overlay a canvas element on top of the video and write to it as the transparency layer?

Great article! I’ve been looking at this problem for years and at last it seems that the browsers are doing the right thing. Thanks for sharing!

Thank you for this.

Unfortunately checking for Safari version alone is not enough. On desktop computers HEVC decoding is only supported from Mac OS 10.15 (Catalina).

On versions prior to that the video will render with a black background. Any pointers on how to refine the feature detection would be appreciated.

This is exactly the issue I’m facing. Would love a solution that could play another version for MacOS <10.14, perhaps a gif?

Great guide, thank you.

Thanks for this excellent tutorial! I am new to ffmpeg, and I am getting this error:

Incompatible pixel format ‘yuva420p’ for codec ‘libvpx-vp9’, auto-selecting format ‘yuv420p’

I looked around a bit and someone suggested “changing native decoder to libvpx decoder which provides alpha”, but unfortunately did not provide instructions to do that. Have you run into this and do you have any advice?

Thanks in advance, very grateful for this post!

This works perfectly on Mac, Windows and on Android browsers, but the videos don’t display on the iPhone. Any idea how to resolve this? The player already has ‘playsinline’ in it.

I know that perhaps I am late but anyway: you should also add ‘preload=metadata’ attribute and add that meta data in the end of your ‘src’ value. That value is a timestamp of video you want to show. Example below:

GREAT !!! been looking for this. thanks. can you help ? how do I float my video of a News anchor on top of my html (a spinning globe js). I need to have the User control and spin the globe. Did you just explain all that here? what if i want my video to be a Live stream?

That article is truly a gem! Thank you so much! Btw, worth mentioning that all mobile browsers on iOS should be treated as Safari. For example, Chrome on iOS does not support .webm container, neither do the others, but Chrome and other browsers on iOS does support .mov container!

In previous comment under “…all mobile browsers on iOS should be treated as Safari” I meant it in context of transparent video problem.

Great tut, but is there a way to play opaque.mp4 video for Safari below version 13 and for other browsers transparent .webm as it is in the script? Because the script only calls .webm if the Safari is not 13+, but Safari supports webm only from version 15+. Thanks!

Alpha Channel

The purpose of this document is to define the method of supporting WebM video with alpha channel information for VP8 video.

One of the most requested features for WebM as used in HTML5 is for alpha channel support, i.e. a value for each pixel in a video frame that indicates the desired transparency, where 0 is completely transparent and effectively masked, and 255 is completely opaque. Values in between specify degrees of opaqueness meaning that the resulting pixel value is the ratio of the normally occluded pixel and the normally occluding pixel.

Alpha channel data should be pixel perfect

Loss in alpha channel data is acceptable

Design Ideas

Method 1 - VP8 encoding of A-channel

The YUV frame is sent to the encoder (without the A-channel). The encoded output is placed into a Block element in the container. The A-channel is also VP8 encoded (with A-channel in Y plane, dummy values in U and V planes) and the encoded output is placed in the BlockAdditional element of the container. The A-channel uses a separate encoder than that of the YUV frames (to exploit temporal coherence). Though this method might not give a pixel perfect alpha information, it will be perceptually lossless given enough datarate.

The “Block” data is sent to the VP8 decoder and the “BlockAdditional” data (if present) is sent to another VP8 decoder and a component after the decoder will reconstruct the appropriate YUV frame and A-channel, which is then passed on to the renderer.

Alternatives Considered

Method 2 - Lossless encoding of A-channel

This method is almost similar to Method 2 with the only difference being the A-channel is encoded by a lossless technique (which is to be defined later) and is placed into BlockAdditional element in the container (exact spec to be defined later). This is optimized such that the BlockAdditional is present only when there is a change in A-channel (for e.g. if the A-channel doesn’t change between frame 20 and frame 35, then there will be a block additional only on frame 20 and not on frames 21 through 35). The lossless encoding technique used can be similar to the one used for alpha channels in WebP, so essentially it will be alpha part of a standard WebP frame. Again, this is tentative and if there is a better lossless encoding method that will exploit temporal redundancy, we can probably use that.

Methods 1 & 2 need vpx to support a new paradigm of having multiple encoder/decoder instances at the same time (one for video data and one for alpha channel).

Method 3 - Double height and VP8 encoding

The YUV frame height is doubled and the A-plane information is stored in the bottom half of the Y plane. The bottom halves of the U and V planes are not used and are set to fixed dummy values. This frame is then sent to the encoder, which does not know presence of A-channel in the raw YUV frame. A flag is added to the container indicating the presence of alpha channel.

The decoder will decode the encoded frame with A-channel and output YUV frames of twice the original source height. Again, the decoder does not know about the presence of A-channel in the decoded data. If the flag is set in the container, a component after the encoder must reconstruct the original YUVA frame. Then the YUV and A-channels are passed on to the renderer appropriately.

Pros and Cons

Video with alpha transparency on the web

I've been helping some teams at Shopify improve page load performance, and the issue of 'videos with an alpha channel' kept coming up, where videos of UI mocks needed to be composited on top of inconsistent backgrounds, such as larger CSS backgrounds.

Often a good solution here is to create the animation using web technologies, but sometimes video is a better solution for consistent frame rates, and allows for effects like motion blur which don't currently exist on the web.

I didn't know much about it, so I dug in to try and find the most robust and efficient way to do it. I thought it was going to be a nice little I-can-do-this-while-jetlagged hackday project, but it's way more complicated than I thought. It turns out, the 'native' ways of doing it are inefficient and buggy. If you handle the transparency yourself, you avoid these bugs, and serve a file that's half the size, or less.

If you just want the solution, here's <stacked-alpha-video> , an NPM package to handle the playback of these videos.

Otherwise, here's what I discovered, and the many bugs I filed along the way.

Native support for transparency in web-compatible video formats

Web-friendly video formats have supported transparency for 15 years. So by now it'd be well-supported and easy to use, right? Right?

AVIF ain't it

AV1 is a great video format in terms of the compression ratio, and the encoder is great for a variety of content. However, surprisingly, it doesn't support transparency.

AVIF is an image format built from AV1. AVIF does support transparency. Also, 'animated AVIF' is a thing. It's stored as two AV1 streams, where the additional stream is a luma-only (black & white) video representing the alpha channel.

Taking the example at the top of this post, I can get the size down to 504 kB with acceptable loss.

Here's a demo, but… don't get your hopes up:

Show AVIF demo

Hide AVIF demo

Given that AVIF is well supported , it sounds like the ideal solution. But…

It doesn't work in Safari

Although Safari supports AVIF, and supports transparency in AVIF, it doesn't correctly support transparency in an animated AVIF. It looks a real mess, and its horrendously slow.

Bug report .

The performance is prohibitively bad

Chrome and Firefox render the AVIF correctly, but it struggles to hit 60fps even on an ultra high-end laptop. On Android, it struggles to hit even a few frames per second.

• Chrome bug report .
• Firefox bug report .

Streaming is poor

When playing content back via <video> , browsers will delay starting playback until it thinks enough is buffered for uninterrupted playback. However, because this is <img> rather than <video> , Chrome will just display frames as soon as it has the data, making playback really choppy on slower connections.

This is really because…

Animated image formats are a hack

Im my opinion, animated AVIF doesn't make sense in a world where AV1 video exists. Even if all the above bugs were fixed, you'd still be unable to:

• Show browser video playback controls.
• Programmatically pause/resume playback, e.g. for accessibility reasons.
• Fallback to an alternative video format via <source> .
• Include audio.

There are benefits to being able to include animated content in an <img> , especially in contexts like forums that support <img> but not <video> . The good news is, Safari solved this back in 2018:

The above just works in Safari. You can even use videos as image content in CSS. The bad news is, Chrome isn't interested in supporting this . Booooooooo.

Encoding animated AVIF

For completeness: here's how to create an animated AVIF using ffmpeg :

• CRF (0-63): Lower values are higher quality, larger filesize.
• CRFA (0-63): Like CRF , but for the alpha channel.
• CPU (0-8): Weirdly, lower values use more CPU, which improves quality, but encodes much slower. I wouldn't go lower than 3.

VP9 + HEVC somewhat works

This solution isn't ideal, and definitely isn't the most efficient, but it's the best we've got when it comes to native support, meaning it works without JavaScript:

This is 1.1 MB in Chrome & Firefox via the VP9 codec, and 3.4 MB in Safari via the HEVC codec. The VP9 is double the size of the AVIF, which shows the generational gap between the codecs.

The HEVC must appear first. Safari supports VP9, but it doesn't support VP9 with transparency ( bug report ), so we need to 'encourage' Safari to pick the HEVC file over the VP9.

I'm a little worried that a non-Apple device will try to play the HEVC file, but not support transparency (after all, it's an Apple extension to the format (pdf) ), resulting in broken output. However, I haven't seen this happen yet.

Also, there are a couple of bugs to be aware of:

• Chrome Android gets the alpha channel wrong . Depending on how much transparency you use, it might not matter too much. This has been fixed in Canary, but at time of writing, it hasn't reached stable.
• Playback often stalls on Firefox for Android .

Encoding VP9

With ffmpeg :

• EFFORT ( best or good ): good is faster, but slightly lower quality.

Encoding HEVC

This is the format you need for Apple devices, so it might not surprise you to hear that you can only encode it on MacOS.

In addition, you really need to fork out £50 or whatever for Apple's Compressor .

But even then, the results aren't great. I don't think Apple's Compressor is designed with this kind of content in mind, so you usually end up with a much larger file size than the equivalent VP9.

Here's a quick video guide to using the Compressor app to encode video with an alpha channel .

If, after forking out £££ for an Apple device, you really really really don't want to spend £50 on Compressor, you can encode a kinda shitty version using ffmpeg . Note: this only works on MacOS, as it calls out to the built-in codec.

• -q:v (0-100): Quality, where 100 is the highest quality with largest file size.
• -alpha_quality (0-1): Separate control of the alpha channel quality.

The reason this method is worse is because, for whatever reason, it uses the BGRA pixel format. This means the red, green, and blue channels are stored separately. This isn't very efficient. Video formats tend to use YUV, where brightness (Y) is stored separate to colour (UV). Human eyes are more sensitive to brightness than colour, so this separation means more bits can be spent on the brightness data vs the colour. I've filed a bug to see if this can be fixed . In the meantime, this method will yield around double the file size compared the already-not-great Compressor result.

There's a feature request for the open source & cross-platform x265 codec to support transparency , but it doesn't seem to be going anywhere.

Doing it manually

AV1 is the most efficient codec we have in browsers, but it doesn't support transparency. When it's in an AVIF container, it does, but the performance is prohibitively bad.

So, I thought, what if I split the video in two, making it double height, where the top half is the video without the alpha channel, and the bottom half is the alpha channel represented as brightness?

Then, a WebGL fragment shader can be used to efficiently apply the bottom half as a mask to the top half:

And here it is:

For Chrome, Firefox, and Safari on a iPhone 15 Pro or M3 MacBook Pro, this is 460 kB. A huge reduction compared to 1.1 or 3.4 MB for the native version.

In fact, the alpha data in the bottom half of the video only adds 8 kB to the overall size. I guess this is because the content is a single channel (brightness), mostly flat color, and mostly unchanged from frame to frame. Cases where the alpha data changes more frequently, or includes a lot of semi-transparency, will likely contribute more to the overall file size.

Other Apple devices don't support AV1, so they need an HEVC version at 1.14 MB, which isn't as good, but still a lot smaller than the 3.4 MB version they'd get for the native version.

The 460 kB AV1 version is even significantly smaller than the 504 kB AVIF. I'm not really sure why. With the AVIF, I encoded with the exact same settings - I even encoded the alpha data lower quality in the AVIF, so in theory it should be at an advantage. I guess the AVIF has overhead by being two separate video streams, whereas the stacked version is one video.

Wrapping it up in a web component

I've published a little web component to handle the rendering :

You control playback via the <video> , so you're in full control over how the video is fetched, and it can also start fetching before JS loads. The web component just handles the rendering.

I'm far from a web component absolutist , but it seemed like the perfect choice here to make the component useable across frameworks, or without a framework.

It's available on NPM , but I also export the internals , so you can access the WebGL bits without going via the web component.

The one thing I think it's missing is being able to use the native <video> controls, so I filed an issue for that too .

Encoding the video

Again, ffmpeg is the tool for the job. Here's the filter:

Breaking it up step by step:

• [0:v]format=pix_fmts=yuva444p[main] convert to a predictable format.
• [main]split[main][alpha] fork the output.
• [alpha]alphaextract[alpha] with the 'alpha' fork, pull the alpha data out to luma data, creating a black & white view of the transparency.
• [main][alpha]vstack stack the 'main' and 'alpha' forks on top of each other.

Encoding AV1

This is the ideal format:

Safari on Apple devices will use the AV1 if they have a hardware decoder (iPhone 15 Pro, M3 MacBook Pro), otherwise they need an HEVC alternative. But, since we don't need native transparency support, we can use the open source & cross-platform x265 codec:

• PRESET ( medium , slow , slower , veryslow ): The slower you go, the better the output.

I find I have to go with a much lower CRF than with the AV1.

Aside: limited range

The ffmpeg examples I've given here result in the videos being encoded in 'limited range'. This uses 16-235 rather than the full 8bit 0-255. This 'feature' exists due to old CRT TVs which would suffer from signal overshooting. Unfortunately, it still hangs around as a kind of default, even to the degree where Chrome has bugs when handling the full range .

8bit is pretty minimal when it comes to gradients, so this ~15% reduction can result in banding. If this is a problem, you can try encoding to one of the 10bit pixel formats by swapping out format=pix_fmts=yuva444p for format=pix_fmts=yuva444p10le , and changing the pix_fmt to yuv444p10le . I'll leave that for you to figure out 😀

View this page on GitHub

Hello, I'm Jake and that's me there. The one that isn't a cat. I'm a developer of sorts.

Feel free to throw me an email , unless you're a recruiter, or someone trying to offer me 'sponsored content' for this site, in which case write your request on a piece of paper, and fling it out the window.

DEV Community

Posted on Oct 3, 2022

Transparent videos on the web: how to make them and use them in Webflow projects

Transparent videos are far underused in web projects with complicated designs. They particularly shine:

• When a complicated animation needs to be shown (such as a product mockup, elements of UI, etc.) without limiting background colors and gradients.
• When multiple videos need to be layered.

Here's an example of a creative concept that would be impossible to implement without video transparency: Webflow page

In this article, you'll learn how to recreate this page so that it works in any modern web browser like Chrome, Safari, Firefox, and Edge.

Transparent videos 101 and why they are rarely used

Long story short: you need to use certain video formats to enable transparency. Of course, Apple and Google couldn't agree on supporting the same video format, so you have to render two video files:

• HEVC with Alpha for Safari;
• VP9 with Alpha for Chrome.

Some video editing programmes can render HEVC with Alpha, yet they completely ignore the VP9 format (and Google Chrome users). And that's exactly where the problem lies: you have to convert HEVC to VP9, which often doesn't work as smoothly as we'd like. This article shows a way to reliably render both HEVC and VP9 videos by using a sequence of PNG images as a proxy.

Step 1: Create a video with a transparent background.

If you already have such a video, you can continue with step 2. If you have a regular video with background, you need to remove it. A few tips on how to do that:

• An easy way with mostly good (but not guaranteed) results: a tool like unscreen.com .
• A bit more complicated but with guaranteed results: the Rotobrush tool in After Effects. Here’s a good tutorial on how to use it.

Step 2: Render the video as a PNG sequence in AE.

Add your composition to a render queue and set the export format as 'PNG sequence'. Set the channels setting as RGB + alpha.

Set up a naming convention in the ‘Output to’ setting as

You'll end up with a sequence of PNGs named image-001.png, image-002.png and so on.

Step 3: Render transparent video for Chrome, Safari, Firefox and Edge using FFMPEG.

Chrome supports transparency for WEBM videos with VP9 encoding. To render such a video, use this command. If you've used a different naming pattern for your png files, don't forget to change the 'video_*.png' piece to match it.

Transparent videos in Safari only work with HEVC videos. To render a HEVC video, use this command:

If you've used a different naming pattern for your png files, don't forget to change the 'video_*.png' piece to match it.

Step 4 (optional): How to fix the bug in After Effects that the background is 'half' transparent.

In some rare cases, Google Chrome may play your transparent videos as if they still had a background. This can happen because the background pixels are not literally deleted but rather set as 'hidden'. You can check if transparency works in Chrome in your case by uploading the video to Google Drive and then playing it with the built-in player.

If you've encountered this problem, you can remove the background completely with the app Imagemagick. The easiest way to install it is via Homebrew:

Imagemagick comes with a number of tools to process images. The tool we need in our case is called Mogrify. Open Terminal in the folder with the png sequence and try

Re-render the videos (as in Step 3) and check if Mogrify did the trick.

Step 5: Using the videos on the web.

Now that you have both MOV and WEBM files, it's time to put them online. Upload the videos to your cloud storage/web server and use this code snippet wherever you need the video.

Demo page HTML.

Here's the exact code used on the Webflow demo page .

Quick recap.

• Remove the background in your video or create a new one from scratch.
• Export the video as a PNG sequence.
• Render two videos: HEVC with Alpha for Safari and WebAssembly-based browsers, and WEBM with Alpha for Chrome and Chromium-based browsers.
• Upload the videos to cloud storage.
• Embed the videos with the tag including two tags including URLs of HEVC and WEBM videos.

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Comprehensive TableBench Dataset Advances Table Question Answering

Mike Young - Aug 23

Introduction to Programming: A Beginner's Journey into the World of Code

Captain Iminza - Aug 23

Optimize Black-Boxes: Vizier Gaussian Process Bandit Algorithm Provably Efficient

Hallucination detection for reliable factual question answering.

We're a place where coders share, stay up-to-date and grow their careers.

How to use videos with alpha transparency on the web

I think it’s a little known fact that you can use video with alpha transparency on the web. Perhaps because the use cases are few. However, with UI I have been prototyping lately, I have found great utility in it when I want a fancy animation that I can’t easily re-create with SVG. The sort of 3-4 second fancy animation that would come out of After Effects.

Anyway, if search engines have brought you here, you probably want me to get on and ‘show you the money’. Here goes.

Syntax for transparent video on the web

You can have transparent video on the web right now, working in modern versions of Safari, Firefox, and Chrome (and its variants). As you might expect, browsers can’t agree on the ‘best’ format so you are in the age-old spot of needing to provide alternate file versions. Yes, just like fonts, standard video et al in the past.

To accomplish this feat, we can use the picture element with a couple of alternate sources. Suppose I have my transparent video as two file versions. Don’t worry if getting the two versions themselves eludes you at this point, we will sort that in a moment:

• a *.mp4 HEVC file for Safari
• a *.webm file for Chrome/Firefox

Here is the kind of markup you need:

Of note, in this example, as it is something I am inserting and removing from the DOM as needed I want it to autoplay , and for that to work I also need it muted . Then we just specify our two sources and the browser picks the first one it can make use of, from top to bottom.

Whether you want to provide a third non-transparent video source for browsers that can’t make any use of either, I’ll leave as an exercise for you.

Creating the correct mp4 and webm files

Firstly, be sure the video you have exported actually has alpha transparency. The file you have should show whatever is behind it, if you open it in QuickTime, for example. If it doesn’t, head back whence you came (Final Cut Pro, Da Vinci, Premiere etc).

Once you have your transparent ‘source’ file, you need to create the HEVC mp4 and webm versions. You can do this a number of ways (allegedly) but let me save you some time. Use the Rotato Convertor tool. I know, how good can a tool be that is one letter away from a potato? Turns out, really good!

If you are on Linux or Windows, you’ll need to look elsewhere I am afraid. Most tools sit on top of FFmpeg but I found getting that running a bit of a pain. YMMV.

So, that’s it, video with alpha transparency on the web. Relatively simple and surprisingly lightweight alternative to animations.

Update! Another, possibly better, option: mix-blend-mode

This is why I can’t bear to move from WordPress; I’d lose out on a simple way to get comments! Thanks to this comment there is another option.

And you don’t necessarily need a transparent video to gain the same effect!

If you head over to the destinus homepage you should see a paper airplane video against another video and a solid background color. The video seems transparent but it isn’t! There aren’t even any different video formats for different browsers! What is this whitchery!

The magic trick here is using the mix-blend-mode property of CSS on the upper video element. I’ve never even thought of using it for this so kudos to Benji in the comments for the solution.

Why does this work?

If we look at the specification for mix-blend-mode , and the screen value in particular, it has this to say:

The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged.

Practically, this means that if our video has a black background, it will be blended with whatever is behind, as if the black was… transparent.

I think I might even prefer this approach as it doesn’t require multiple versions of the video assets.

7 comments:

Why so lazy? Where’s the look-see example of this functionality?

Lazy? As you have such a great work ethic, how about you make one with the information you just learnt? smh

Interesting, I didn’t even realise this was an issue! I built a website for a client a while back with a transparent video using `mix-blend-mode: screen` on the video element itself. Any reason this wouldn’t suffice? Here’s the site (it’s the paper airplane over the blue bar and background video) https://destinus.ch

Oooh, that’s very interesting. Couldn’t understand what you’d done there at first.

Am I right in thinking the plane video doesn’t have transparency but a black background? And then because it has a black background, screen blend mode disregards the black and lets whatever is underneath Be seen? I like it!

Might add a note to the main article about what you’ve done there if that’s ok? Seems like a very smart choice that’s likely easier in many instances.

Yeah it’s exactly that! It may not work for all applications but it worked for me and I’ve used it elsewhere since then. Feel free to use it in the article, I’m curious if someone else will see it and point out anything I missed or didn’t think of.

Thanks again for the insight. Added the info into the main post

Mate, you just saved my day. Big, big thanks, I’ll bring this to stackoverflow, adobe forums & way further. Everywhere people are like “yeah, you need a HEVC mp4 with transparency”, but this sadly is only smoothly encodeable on apple, whereas I’m on Windows.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.

The :removed pseudo-class and :finished functional pseudo-class (that I wish we had)

Where the f*** is native css nesting.

Alpha Transparency in Chrome: How to convert videos to the WebM format (free)

Until recently, videos with transparency were not a thing on the web. Well, not entirely true: it's been a thing since Chrome version 31 , released back in 2013.

This post is a part of our series called The Big Guide to Transparent Backgrounds in videos and images

But even though Chrome has more than 2 billion users by now, it's not enough. We still have half a billion on Safari, and more than 1 billion iOS users, who can only use Safari as their browser, even in other apps. In 2019, Apple launched support for HEVC With Alpha . We now have billions of browsers supporting alpha channel videos. But not in the same way; you need a WebM video for your Chrome videos and an HEVC video for your Safari users.

In this post, I'll show you various ways to do that. You may also find this interesting if all you want is to convert a video to WebM.

Here's what we'll go through today:

What is WebM?

WebM is Google's completely free video format, launched in 2010. It offers high quality, small file sizes, and is optimized for the smaller processors in mobile phones. From 2013, WebM also supported alpha transparency channels. Supported browsers are Chrome, Firefox, Opera, Edge, and, to a certain extent Safari on macOS Big Sur (2020) and newer. When I say "certain extent", it means yes, it's supported — but no transparency.

What is HEVC With Alpha?

HEVC is just another name for H.265. That means it's in direct lineage with H.262 MPEG-2, the DVD format. Like WebM, HEVC was made with high quality, low file size, and mobile devices in mind - and alpha transparency. Supported browsers are Safari on macOS and iOS, and the Android browser. Edge technically supports it but needs the right hardware, so I wouldn't rely on it fully.

How do you convert a movie to WebM?

There are several converter apps out there. Most of them are free and open-source, but not all of them are easy to use. Some of them are so complex that command-line tools seem more simple. Let's dive in and take a look at the most popular apps for video conversion.

Almost 20 years old, this app is famous among the DVD ripping generation of the 2000s. It has a very wide array of settings—to the point where it's just confusing. We haven't been able to get Handbrake to make a VP9 WebM with alpha channels yet.

Download Handbrake . Free.

Shutter Encoder

A less known free alternative and the simplest of the complex, Shutter Encoder's 1960ies car-inspired UI lets you convert between a wide range of formats. The advanced settings are packed away in a separate area, which is where you'll find the switch for preserving transparency, which is off by default. Alas, we have not been able to make this work yet.

Shutter Encoder . Free.

Rotato Converter

Honestly, we made this because we couldn't make the other tools work, or they were too complicated for a simple task like this. We may add more formats to the app, but right now it does one thing well: convert a video to WebM and HEVC With Alpha while preserving transparency. That's it.

Rotato Converter .

How do you convert a video to HEVC With Alpha?

If you have a ProRes4444 video with alpha, converting to HEVC is simple. You can use the Rotato Converter here, but you don't need an external app for this, as your Mac already knows how to do it.

• Right-click the video file you want to convert
• Choose Encode Selected Video File
• Set the format to HEVC and check Preserve Transparency

Here's what it looks like

Using Rotato Converter

Here's a short video:

There's just one step:

• Drag in your ProRes or HEVC video

Rotato Converter saves the converted videos in the same folder as the original. If your original video was named My Product Video.mp4, the converted videos will be called `My Product Video-vp9-chrome.webm` and `My Product Video-hevc-safari.mp4` .

How do you double-check that your video has alpha transparency?

QuickTime and QuickLook (in Monterey) don't show alpha channels, so you have to look elsewhere. Luckily, there are a few simple ways to do this. Read more in our Guide to Testing Video Transparency or take a look at the two options below using Rotato's free tools.

Testing in Rotato Converter

Simply by dragging your file to Rotato Converter, you'll see if the video has an alpha channel. If the background behind the video is a checkered pattern, that means "yes"!

Alas, this doesn't work for WebM, only HEVC With Alpha and ProRes4444 with alpha.

Testing on the web

If you watched the video above, you may have noticed that Rotato Converter shows two buttons when it's finished: Test in Chrome and Test in Safari. What these buttons simply do is take you to Rotato's Video Transparency Tester , and reveal the relevant file in a finder window on top.

Here's a video that shows exactly what that looks like:

Final thoughts

Video formats are not as easy as they could be, once you decide you want to move out of the safe space of embedding Vimeo and Youtube.

The good news is, if you do this, you'll most likely have an edge over other designers and developers who decide that it's just too much work. I hope I've shown you that converting and testing videos with alpha transparency isn't as complicated as it looks, especially not with the free tools above.

• Overview & Code Repos
• Submitting Patches
• Code Reviews
• Conventions
• Continuous Integration
• Bug Reporting
• Build Prerequisites
• Repository Layout
• Draft VP9 Bitstream Format
• VP Codec ISO Media File Format Binding (MP4)
• VP9 Levels and Decoder Testing
• RFC 6386: VP8 Data Format
• WebM Container Format
• WebM Encryption
• VP8 RTP Proposal (Draft)
• Encoder Examples

Can Your Browser Play WebM Video?

More information below

What outcomes are possible with this tool?

We queried your browser about WebM support. First we checked whether the browser supports the canPlayType property on an HTML5 video element.

If canPlayType is supported, we next ask if your browser believes it can play the WebM format. HTML5-compliant browsers must respond with one of three answers: probably (which we take to be Yes ), maybe (which we also take to be Yes ), or an empty string (which we take to be No ). For No , the video player will most likely be broken, and you'll see a sad emoticon. For probably or maybe , the player should work and you'll see a smiley emoticon.

Shouldn't you serve me some other kind of video if WebM can't play in my browser?

In a production environment, a site would provide alternate video content for older browsers. This page is for browser testing only.

I can't get Internet Explorer 9 to play the WebM videos I'm serving. My HTML5 is correct, and I can download the video. What could be wrong?

Ensure that your webserver responds to WebM file requests with the MIME type video/webm . Serving an incorrect MIME type causes IE9 to switch out of HTML5 rendering mode. A 200 response (OK) alone is not enough.

What's my literal user-agent string?

A support person may ask for this information. Please make a note of it.

• Chrome for Developers

Alpha transparency in Chrome video

Chrome 31 now supports video alpha transparency in WebM.

In other words, Chrome takes the alpha channel into account when playing ' green screen ' videos encoded to WebM ( VP8 and VP9 ) with an alpha channel. This means you can play videos with transparent backgrounds: over web pages, images or even other videos.

There's a demo at simpl.info/videoalpha . Somewhat surreal, and a bit rough around the edges (literally) but you get the idea!

How to make alpha videos

The method we describe uses the open source tools Blender and ffmpeg:

• Film your subject in front of a single color background such as a bright green curtain.
• Process the video to build an array of PNG still images with transparency data.
• Encode to a video format (in this case, WebM).

There are also proprietary tools to do the same job, such as Adobe After Effects , which you may find simpler.

1. Make a green screen video

First of all, you need to film your subject in a way that everything in the background can be 'removed' (made transparent) by subsequent processing.

The easiest way to do this is to film in front of a single color background, such as a screen or curtain. Green or blue are the colors most often used, mostly because of their difference from skin tones.

There are several guides online to filming green screen video (also known as chroma key) and lots of places to buy green and blue screen backdrops. Alternatively, you can paint a background with chroma key paint .

The Great Gatsby VFX reel shows just how much can be accomplished with green screen.

Some tips for filming:

• Ensure your subject does not have clothes or objects that are the same color as the backdrop, otherwise these will show up as 'holes' in the final video. Even small logos or jewelry can be problematic.
• Use consistent, even lighting, and avoid shadows: the aim is to have the smallest possible range of colors in the background that will subsequently need to be made transparent.
• Using multiple diffused lights helps to avoid shadows and background color variations.
• Avoid shiny backgrounds: matte surfaces diffuse light better.

2. Create raw alpha video from green screen video

The following steps describe one way to create a raw alpha video from green screen videos:

• Once you've shot a green screen video, you can use an open source tool like Blender to convert the video to an array of PNG files with alpha data. Use Blender's color keying to remove the green screen and make it transparent. (Note that PNG is not compulsory: any format that preserves alpha channel data is fine.)

Convert the array of PNG files to a raw YUVA video using an open source tool such as ffmpeg:

ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw

Alternatively encode the files directly to WebM, using an ffmpeg command like this:

ffmpeg -i image%04d.png output.webm

If you want to add audio, you can use ffmpeg to mux that in with a command like this:

ffmpeg -i image%04d.png -i audio.wav output.webm

3. Encode alpha video to WebM

Raw alpha videos can be encoded to WebM in two ways.

With ffmpeg: we added support to ffmpeg to encode WebM alpha videos.

Use ffmpeg with an input video including alpha data, set the output format to WebM, and encoding will automatically be done in the correct format as per the spec. (Note: you'll currently need to make sure to get the latest version of ffmpeg from the git tree for this to work.)

Sample command:

ffmpeg -i myAlphaVideo.webm output.webm

Using webm-tools:

git clone https://chromium.googlesource.com/webm/libvpx

webm-tools is a set of simple open source tools related to WebM, maintained by the WebM Project authors, including a tool for creating WebM videos with alpha transparency.

Run the binary with --help to see list of options supported by alpha_encoder.

4. Playback in Chrome

To play the encoded WebM file in Chrome, simply set the file as the source of a video element.

How did they do it?

We talked to Google engineer Vignesh Venkatasubramanian about his work on the project. He summarized the key challenges involved:

• The VP8 bitstream had no support for alpha channel. So we had to incorporate alpha without breaking the VP8 bitstream and without breaking existing players.
• Chrome's renderer was not capable of rendering videos with alpha.
• Chrome has multiple rendering paths for multiple hardware/GPU devices. Every rendering path had to be changed to support rendering of alpha videos.

We can think of lots of interesting use cases for video alpha transparency: games, interactive videos, collaborative story telling (add your own video to a background video/image), videos with alternative characters or plots, web apps that use overlay video components.

Happy film making! Let us know if you build something amazing with alpha transparency.

Helpful resources

• WebM VP8 video with alpha channel
• WebM VP9 video with alpha channel
• Alpha in WebM explained
• README for WebM Alpha Encoder
• WebM Discussion Google Group

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2013-07-25 UTC.

View in English

More Videos

Streaming is available in most browsers, and in the Developer app.

HEVC Video with Alpha

With the addition of alpha channel support for HEVC video, you can now composite video over custom backgrounds in both your apps and on the web. Learn how to author compatible media, and the best practices for playback.

• HEVC Video with Alpha Interoperability Profile
• Using HEVC Video with Alpha
• Presentation Slides (PDF)

Related Videos

• What's New for Web Developers

Hello everyone. My name is Shiva Sundar, and I'm extremely excited to talk about HEVC Video with Alpha.

You're probably familiar with Alpha channels in image files today. Alpha channels are ubiquitous in image files, in our apps and on the web. When there's an Alpha channel in an image file, every pixel in the image gets opacity along with its color. This allows us to have an image that has a complex, non-rectangular shape but looks natural when composited against many different backgrounds.

So Alpha and transparency are common and used all over the web principally by still image formats like PNG.

Alpha in video has been less common. It has been a professional video workflow tool. The formats used in professional video workflows like Apple ProRes 4444 are very high data rate and not appropriate for delivery. In 2017, Apple introduced support for the HEIF image file format, which lets us take advantage of the advanced lossy compression technologies in HEVC to compress still images. HEIF also lets you include an Alpha channel in image files. In fact, this year we are adding support for HEIF sequences, which lets you have multiple images in a single file. HEIF sequences also support Alpha channels.

For some time we've recognized the need for a lower bitrate way to include Alpha in motion video. And so we said let's use that advanced loosy compression technology to support Alpha channels in video files as well.

Playback of HEVC video with Alpha is supported in iOS 13, tvOS 13 and macOS Catalina on all supported devices and computers. Encoding is supported on all of those devices and computers that have an HEVC encoder.

Having a video with Alpha format that works well at bit rates low enough for distribution opens up many opportunities.

You can have rich, non-rectangular motion video content that you incorporate as a layer as part of your app's expressive experience.

It could be pre-rendered like an animation. Such an element can move around on top of a complicated background and you could even have several of them to give a feeling of depth or complex interactions. Because these are movies they can have synchronized sound tracks so the characters in these non-rectangular movies can talk. Highly professional. Alpha channel. Content. For you. Woo-hoo. Woo-hoo. They could be integrated into games using SpriteKit, SceneKit or Metal. In this context, we have provided you with some sample code on how to record a SceneKit scene into a HEVC video with Alpha and how to render another in a SpriteKit scene. On web pages, they could bring interactive elements to life. HEVC video with Alpha is supported by Safari in iOS 13 and macOS Catalina. Safari can also tell the web page whether this feature is supported.

For more information on using the media capabilities API, be sure to check out the What's New in Authentication, Safari and WebKit video.

The ability to distribute video with Alpha at low bitrates opens opportunities for authoring apps to provide background removal.

Here I am in front of a green sheet hung from the wall recorded using an iPhone.

I wish I was here. I used a custom video compositor with a co-image filter to replace the green pixels with transparency and exported it to a video with Alpha.

I wish I was here.

And now I can overlay this video on any background I like.

We are providing sample code showing how to do this and write the resulting HEVC video with Alpha movie.

So how does this work? As you know, movie files contain tracks of various media types.

A video track contains video frames. HEVC video with Alpha is contained inside a single video track in the movie.

In the single track, each frame contains 2 parts called layers and each layer is compressed using the HEVC codec.

The base layer contains the colored image of the frame as usual. The Alpha layer contains just the Alpha channel of the frame. This is done using special HEVC syntax which identifies the 2 layers. The HEVC rules for this syntax mean that the HEVC decoder that does not know how to handle the Alpha layer will ignore it and display the base layer alone.

Let's move along and talk about how to use it. HEVC with Alpha encoding is integrated into numerous AV Foundation APIs. Let's look at content creation, for example. You can render video frames with Alpha in your application and use AVAssetWriter to encode them and write them to a movie file.

You can use new presets available with AVAssetExportSession to transcode video formats containing Alpha including Apple ProRes 4444 into HEVC with Alpha. These new HEVC presets have the suffix with Alpha.

You can also use AVAssettExportSession to burn in a specific background color converting a movie with Alpha into a movie without Alpha, that will play on players that don't support HEVC with Alpha.

Or you can also use the HEVC with Alpha video encoder directly via VTCompressionSession.

Looking at AVFoundation's playback APIs, HEVC with Alpha is supported by AVPlayer and AVPlayerLayer for display in your apps view hierarchy via Core Animation, AppKit and UIKit.

The video in AVPlayerLayer will be displayed with a transparent background and composed with the rest of the layers and views.

Alternatively you can access a sequence of decoded video frames directly using AVPlayerItemVideoOutput. This is a great choice when you want to incorporate those video frames into a custom rendering you're doing using Metal, SpriteKit and other GPU-based rendering APIs. If you need to decode frames for another purpose, you can use AVAssetImageGenerator directory and individual frame of the movie as a CGImage with Alpha.

You can use AVAssetReader to extract video frames for use in a non-playback workflow.

You can also use the HEVC with Alpha video decoder directly via VTDecompressionSession.

In short because HEVC with Alpha is integrated into AVFoundation at the level of a video codec, it fits in well into all these familiar API workflows.

Now let us see how we can accomplish this in code. When encoding a movie, when configuring your AVAssetWriter input or VTCompressionSession, use the video codec type HEVC with Alpha. This is a special signal that the Alpha channel should be encoded. The encoded file will have the standard HEVC codec type. It will be backwards compatible. An HEVC player that does not understand Alpha will display only the base video layer. It will ignore the Alpha portion.

If you work with Alpha channels, you may know that there are 2 strategies for how to write video data to a file, premultiplied Alpha or straight Alpha, also known as unassociated Alpha or non-premultiplied Alpha. The tradeoffs between these choices are beyond the scope of this talk.

If you're familiar with these, what you need to know is that both are supported.

If you're not similar with these, we recommend the default, which is premultiplied Alpha. It's the natural choice in most GPU-based rendering parts and it scales better.

Now looking at the code, you may specify the Alpha mode by either configuring the compression session or as a buffer attachment. As a safety mechanism if the setting and the buffer attachment are both specified and they do not match, the encoding operation will fail.

Our APIs require the Alpha channel to be encoded with fixed quality because video encoding artifacts in the Alpha channel can be bothersome in ways that the same artifacts wouldn't be in the base layer. Our APIs let you control the base layers bitrate and the Alpha channel's quality separately if you need to. Now, looking at the code you can specify the Alpha layer quality using target quality for Alpha parameter.

It is arranged between 0 and 1 where 1 means it is close to lossless. The bitrate parameter you specify only applies to the base layer and is ignored by the Alpha layer.

To detect the presence of an Alpha channel, you can either test AV media characteristic containsAlphaChannel or you can query the format description extension contains Alpha channel.

If you are trying to export HEVC with Alpha movie, use to determine compatibility API to validate that Alpha is present in the source asset.

This validation only takes the source movie into account not the video composition. So you must skip it if you are using a video composition to generate a new Alpha channel from sources that do not have Alpha channels.

There are a lot of video players in the ecosystem. Many of them don't support HEVC let alone HEVC with Alpha. You can remove the Alpha channel by burning in a solid background color. We have added some convenience API and sample code to help simplify this conversion. If you're looking to build support into a non-Apple media framework, we have published a specification for an interoperability profile that you should read, but if you can't wait, here is a sneak peek.

To summarize, HEVC video with Alpha is a cool new feature. It takes advantage of HEVC's state of the art compression technology. It is supported on iOS 13, tvOS 13 and macOS Catalina. It takes advantage of hardware acceleration on recent devices. It is well integrated into AVFoundation for use in your apps. It is also integrated in Safari for use in your web experiences. HEVC with Alpha brings us new opportunities for creative expression for both developers and users alike. We can't wait to see the ways you can take advantage of it in your apps. Thank you for your time.

Looking for something specific? Enter a topic above and jump straight to the good stuff.

An error occurred when submitting your query. Please check your Internet connection and try again.