Without further ado, let’s start with a picture, which all depends on “editing” :

With the increase of business scenes, more special effects can not be well satisfied with the way of native drawing and GIF, which brings a new way: video effects instead. Especially in the video (live broadcast) industry, all kinds of special effects are cool and exquisite, which can well express users’ ideas. But this brings up a problem: while it’s easy to play the video, it’s not as easy to show the UI underneath the video, which requires the video to be transparent so it doesn’t obscure the underlying UI. Since writing this blog, there is a very simple way to implement this transparent video playback, that is to use the third-party library ** WLMedia **, a few lines of code to achieve transparent video playback.

First, let’s talk about the principle of transparent video playback (just simple call library is not good) :

Video playback usually converts the video data (mostly YUV) to RGBA for rendering (playing), which is what we do in practice, we get the RGBA color data and draw it on the surface through OpenGL, then the rendered video is normal (opaque). Because our alpha channel is 1 by default (1 is completely opaque, 0 is completely transparent). When we want to achieve transparent effect, we need to control the alpha channel value and take the transparency of the current pixel into account when rendering the color of the pixel, so that the rendered color value is transparent, so that the transparent video can be played.

Ii. Transparent video playing mode:

1, filter a certain range of color value (the simplest, suitable for any video, but the effect is not good, similar to the film green cloth effect) :

For example, if we set the background of the special effect video to black [R (0) G (0) B (0)] and then use other colors (try not to include black), then we can determine whether the RGB component value of the current pixel is close to 0 when rendering. If so, we can set the alpha value of this pixel to 0 (fully transparent). So the pixel doesn’t show up, so it’s transparent; On the other hand, if the RGB component of the pixel differs greatly from 0, set alpha to 1 (completely opaque), and the pixel will be displayed and our effect will be displayed.

2. Make video containing alpha component value (complex, video needs customization) :

The common production effect of this kind of video is that the alpha value and the special effects are evenly divided. The alpha value is made with black and white special effects video (pure black is 0-fully transparent, pure white is 1-completely opaque, and other colors are between (0-1-partially transparent). When rendering the video, the RGB value of the special effects should be taken first. Then we can get the alpha value through RGB coordinate position, so that the transparent effect can be realized together. Of course, we only need to cut the area where the special effect video is played. For example, if the RGB value of the effect is RGB (100) red, the RGB value of the corresponding alpha value is (0.5,0.5,0.5), so we get the transparency alpha=0.5, and the final rgba value of the rendered pixels is rgba(1,0,0,0.5), which becomes translucent red.

Iii. SDK Invocation method:

Although the principle and implementation of the talk, but to fully achieve the effect is still a certain degree of difficulty, we will open the following call WLmedia library, it is so easy!

Gradle Import library: the latest version is 1.1.3

Implementation 'ywl. Ywl5320: wlmedia: 1.1.3'Copy the code

2. Set the layout:

/ / in all the layout of the upper <. Com. Ywl5320 wlmedia. Surface. WlSurfaceView android: id = "@ + id/WlSurfaceView" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="invisible"/> / / as well as ordinary view can be arbitrarily set position <. Com. Ywl5320 wlmedia. Surface. WlTextureView android: id = "@ + id/WlTextureView" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="invisible"/>Copy the code

3. Start playing (key code)

WlSurfaceView wlSurfaceView = findViewById(R.id.wlsurfaceview); wlSurfaceView.enableTransBg(true); WlMedia WlMedia = new WlMedia(); wlSurfaceView.setWlMedia(wlMedia); wlMedia.setSourceType(WlSourceType.NORMAL); wlMedia.setCodecType(WlCodecType.CODEC_MEDIACODEC); wlMedia.setLoopPlay(false); wlMedia.setVideoClearColor(0, 0, 0, 0); WlMedia. EnableTransVideo (WlVideoTransType.VIDEO_TRANS_LEFT_ALPHA); // Set alpha channel type (left) wlmedia.prepared ();Copy the code

That’s how transparent video works, not just on Android, but on other platforms as well.

Download Demo from GitHub: AlphaVideo

Note: Some of the video footage is from AlphaPlayer