Expo Transparent Video

expo-transparent-video provides support for performant transparent video, on Android, for React Native and Expo.

Installation

Install the package

# using npm
npm install expo-transparent-video

# or using yarn
yarn add expo-transparent-video

Build the package

With expo:

expo-transparent-video relies on native code, so you will need to create a development build to use it.

npx expo prebuild
npx expo run:android

With react-native:

npx react-native run-android

Usage

Since this package only supports Android, it's recommended to create a platform-specific component.

VideoPlayer.android.tsx:

import { TransparentVideoView, useVideoPlayer } from 'expo-transparent-video';

export const VideoPlayer = () => {
  const player = useVideoPlayer('https://cdn.example.com/video.webm');

  player.paused = false;
  player.repeat = true;

  return (
    <TransparentVideoView player={player} />
  );
};

Warning

expo-transparent-video only support external links to video files. You can't use local files.

How to create a transparent video for Android?

The source must be a video compatible with Android.

The source must be a composition of two videos vertically superposed:

The upper part of the video must display the rgb channels
The lower part of the video must display the alpha mask in grayscale (black -> alpha = 0% opacity, white -> alpha = 100% opacity) to apply to the rgb part.

|-----------------------|
|                       |
|                       |
|       rgb video       |
|                       |
|                       |
|-----------------------|
|                       |
|                       |
|  alpha mask video     |
|                       |
|                       |
|-----------------------|

Warning

This cannot display a video that has an alpha channel like transparent webm. It only blends rgb data with alpha data.

But... why?

Well, the default's Android ExoPlayer does not support alpha channel videos. Meaning, if your .webm (or other supported format) has transparency, it will be rendered as black.

This package relies on a technique explained in this Medium article to enable transparency in videos on Android.

License

expo-transparent-video library is licensed under The MIT License.

Credits

This project has been built and is maintained thanks to the support from Software Mansion