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.

Eustace

So you want your activity-Background to be transparent and only the VideoView should be visible to the user? What did you try? Maybe i have a solution.. – Buoy

Nope, I want to playback a video that has transparent areas, so that the background of the parent view is seen through the video. – Eustace

You could decode frames to a SurfaceTexture with MediaCodec, then render the texture with GLES. This would require that the video codec decode to a texture format that supports alpha. I have no idea if it will do that. – Erewhile

Did you achieve this?? – Ribbentrop

Nope, I ended up doing it as a drawable animation and dropping the drawable resolution and frame rate. – Eustace

Answer 1

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>

Epi

Answer 2

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

Groundmass

Answer 3

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.

Centiliter

What if the video isn't within the app? This means the app will have to create a new video using ffmpeg ? But then it goes to a different license, and get much larger, no? Isn't there a solution that uses the WEBM as it is, and handles transparency that WEBM already supports? Or maybe I didn't understand the repository? According to what I see, it handles only MP4 as if it supports alpha channel. Is it right? Please explain. – Benzidine

To use this, you have to perform an extra step of pregenerating and bundling the video in the visual format shown above (1st screenshot) using any tool, ffmpeg being one of them. If you want to play an external video (e.g. via URL) with transparency using this solution, that video has to have the same visual format for the bundled shader to produce the correct output+transparency. This is not supposed to be a simple solution that allows you to play webm with transparency out of the box. I'm also interested in having that so I don't have to do this, if you come across a solution, let me know – Centiliter

So you say I will have to use some library to create a new video? There is no solution to just play it with transparency, as WEBM supports it? Chrome has this ability, and Android doesn't? I've created a request to support it: issuetracker.google.com/issues/220464193 . Please consider starring. – Benzidine