Is there a way to play a transparent video in Flutter?

Question

I want to play a transparent animation video. However, when I try to play a Prores codec, mov format video with the video_player package, it doesn't work. It turns out that the video_player seems to use AVPlayer in ios and the Prores codec does not support it. Is there a way? Using AVPlayer to view transparent video

Answer 1

The last time I tried this, the only easy way that worked for me was to use gifs, which is not really a good choice for quality animations. I had similar issues on android, with video players that were not displaying the transparency, even with a webm video that contained transparency (the flutter video_player plugins rely on Exoplayer and there is a related issue here). I also failed with apng and webp.

Another solution is to use the flutter_vap2 plugin, which worked for me. It seems to support short videos only. Also, the documentation is not easy to read in my opinion, so I'll write something about it here.

The flutter_vap plugin expects the video as a .mp4 file. However it is not interpreted as a regular .mp4 file, because MP4 containers do not support transparency. The video has to be created with a tool that can be found here.

The process goes as this: First, you need the video/animation to be in the form of images, like png images with transparency (as I remember). Then, using the generating tool from the link above, a .mp4 file with h264 or h265 encoding can be created. This file can be opened in a regular video player, but it will not contain transparency (and there will be extra pixels). However, if it is opened with the preview tool from the above link, it will appear normal and have transparency. Once you are satisfied with the video, you can add it into the project and display it with the flutter_vap plugin.

How the plugin works (as I understand it; it may be inaccurate). The plugin uses the Video Animation Player (VAP) from Tencent under the hood. This tool was orginally developped for the penguin esports application (discontinued), to allow displaying animations containing transparency. It leverages the efficiency of h254 or h265 encoding. Since these codecs do not support transparency, the transparency is embedded as regular rgb pixels in the corner of the video. Once the video is decoded, VAP will split the part of the video representing the normal rgb colors and the part representing the transparency. It will then "merge" these two parts into an OpenGL texture that supports transparency, and display it.