Expo Transparent Video

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

Installation

1. Install the package

# using npm
npm install expo-transparent-video

# or using yarn
yarn add expo-transparent-video

2. 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:

1. The upper part of the video must display the rgb channels

2. 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

expo-transparent-video is created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.