Video with transparency on Android

Question

Is there any way to have Android play video with transparent areas? When I try to play a WebM video containing transparent areas in VideoView, the background of the view remains black. Instead of black I'd expect to see the background of the parent view shown through on the transparent areas.

The only working solution I've found so far is to create a drawable animation out of the video frames, which isn't very memory efficient.

Answer 1

Adding on to Krishna's answer, I've created a fork of alpha-movie that plays transparent videos with the alpha data included separately in each frame.

This means that you'll be able to convert transparent webm videos to normal mp4 for use with the AlphaMovieView. It produces accurate transparency as opposed to the chroma key method, allows for partial transparency and doesn't rely on you having to manually set the alpha colour. However you will need to preprocess your transparent video.

1. Add the following to your project to install the package. Source here: https://github.com/nopol10/alpha-movie

    // project's (top level) build.gradle
    repositories {
        // ...
        mavenCentral()
    }

    // module's build.gradle
    dependencies {
        // ...
        implementation 'io.github.nopol10:alpha-movie:1.3.4'
        // ...
    }

2. Download ffmpeg. The most recent version is recommended. It must have libvpx.
3. Run this in ffmpeg -vcodec libvpx -i input_video.webm -vf "split [a], pad=iw*2:ih [b], [a] alphaextract, [b] overlay=w" -x264opts keyint=30 -y output_video.mp4. Replace input_video.webm and output_video.mp4 with the desired input file and output filename.
4. Place the output mp4 in your Android project's assets folder.
5. Add this to your layout xml:

<com.alphamovie.lib.AlphaMovieView
    android:id="@+id/video_player"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    custom:packed="true"
/>

6. Add this to your activity/fragment

alphaMovieView = (AlphaMovieView) findViewById(R.id.video_player);
alphaMovieView.setVideoFromAssets("output_video.mp4");

7. Result:

This method is inspired by the feature in AVProVideo.

Answer 2

I think this will overcome your problem Try this https://github.com/pavelsemak/alpha-movie

Here is the demo example,

<RelativeLayout
                android:id="@+id/mainContent"
                android:layout_width="match_parent"
                android:layout_height="200dp">

                <ImageView
                    android:id="@+id/imageView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="fitXY"
                    android:src="@drawable/bg1" />

                <com.alphamovie.lib.AlphaMovieView
                    android:id="@+id/alpha_video_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    app:accuracy="0.7"
                    app:alphaColor="#000000"/>

            </RelativeLayout>

Answer 3

The best way I can think of for achieving this is using OpenGL ES - you render the video through a surface, and write a small shader that removes the color areas you want removed. You can find several examples for this technique on the web, perhaps this link can provide some kickstart: First steps in creating a chroma key effect using android camera