Video with Alpha Transparency on the Web

x265 has added support for alpha very recently, but only using their standalone CLI. https://bitbucket.org/multicoreware/x265_git/commits/c8c9d22...

[1] https://www.mux.com/blog/your-browser-and-my-browser-see-dif...

The first video was the content I desired, the second video was solid white but for the same length of time as the first video. I was honestly a little flummoxed about the white stream for about 15 seconds before it hit me "this must be an alpha channel".

I don't suspect I have ever seen it in action, so I am extremely curious how well alpha channels can possibly turn out with lossy video formats where the result of any given frame is a matter of interpretation? In lossless formats like GIF the borders of objects at any given frame are perfectly defined, but lossy formats, especially ones using discrete cosine transform, where the object ends and background begins is not clear cut.

However, in many cases, the requirement isn't actually transparency, the requirement is a video background seamless with the containing page.

With most pages white or off-white, this can be done at production. Even responsive dark mode can be done in production if two clips are made.

We used this simpler technique for borderless animated video (e.g., a streaming video spokesperson walking across your e-commerce product page) 20 years ago.

The optical illusion of borderless transparency works so surprisingly well it's unbelievable it's not seen widely.

It will take transparent MP4/MOV as input and output compatible versions for Safari (HEVC) and Chrome (WEBM). Then you simply use a tag that includes both e.g:

    <video playsinline preload="metadata">
      <source src="video.mp4" type="video/mp4; codecs=hvc1">
      <source src="video.webm" type="video/webm">
    </video>

https://apng.onevcat.com/demo/

Or animated webp?

https://mathiasbynens.be/demo/animated-webp

https://cobalt.googlesource.com/cobalt/+/refs/tags/trunk.unn...

-- Continues to render perfectly fine and smooth with 60 fps on my Windows/Firefox/Thinkpad

Ah, the problems of good software running on high-powered machines. Closed, bug not reproducable!

https://static.crowdwave.link/transparentanimatedwebp.html

Seems to work on Chrome, Firefox and Safari.

The video file is here: https://static.crowdwave.link/transparentanimatedwebp.webp

I put the result of the code below here:

This python program will generate webp frames and if you have ffmpeg will convert them to transparent animated webp:

    from PIL import Image, ImageDraw
    import random
    import subprocess
    
    # Image parameters
    width, height = 640, 480
    frames = 1000
    shapes = 10
    
    def random_color():
        # Generate a random RGBA color with varying levels of transparency (alpha)
        return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255), random.randint(50, 200))
    
    def random_position():
        return random.randint(0, width - 80), random.randint(0, height - 80)
    
    def random_size():
        return random.randint(20, 80)
    
    def create_gradient(width, height):
        base = Image.new('RGBA', (width, height))
        top = Image.new('RGBA', (width, height))
        for y in range(height):
            alpha = int((y / height) * 255)  # Alpha varies from 0 to 255
            for x in range(width):
                top.putpixel((x, y), (255, 255, 255, alpha))  # White gradient
        return Image.alpha_composite(base, top)
    
    # Create a series of images
    for i in range(frames):
        # Create an image with a transparent gradient background
        img = create_gradient(width, height)
        draw = ImageDraw.Draw(img)
    
        for _ in range(shapes):
            shape_type = random.choice(['rectangle', 'ellipse'])
            x1, y1 = random_position()
            x2, y2 = x1 + random_size(), y1 + random_size()
            color = random_color()
    
            if shape_type == 'rectangle':
                draw.rectangle([x1, y1, x2, y2], fill=color)
            elif shape_type == 'ellipse':
                draw.ellipse([x1, y1, x2, y2], fill=color)
    
        # Save each frame as a PNG file
        img.save(f'frame_{i:04d}.png')
    
    print("Frames created successfully.")
    
    # Create an animated WebP from the generated frames
    subprocess.run([
        'ffmpeg', '-y', '-i', 'frame_%04d.png', '-vf', 'fps=30,scale=320:-1:flags=lanczos',
        '-loop', '0', '-pix_fmt', 'yuva420p', 'output.webp'
    ])
    
    print("Animated WebP created successfully.")

Pull the slider to change the background so you can see it is transparent.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Animated WebP Display with Background Image</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
                background-image: url('transparentanimatedwebp.jpg');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }
            img {
                max-width: 100%;
                height: auto;
            }
        </style>
    </head>
    <body>
    
        <img src="transparentanimatedwebp.webp" alt="Animated WebP">
    
    </body>
    </html>

If you can already have an access to WebGL shaders, probably banding can be fixed in shaders too.

Edit: sorry, ProRes is of course not "on the web".

(Un)surprised to know this is still an issue in 2024.