• Home

AlphaVideo

The AlphaVideo component allows you to show videos with transparency. More...

• List of all members, including inherited members

Properties

• autoLoad : alias
• autoPlay : alias
• availability : alias
• bufferProgress : alias
• duration : alias
• error : alias
• errorString : alias
• fillMode : alias
• hasAudio : alias
• hasVideo : alias
• loops : alias
• metaData : alias
• muted : alias
• orientation : alias
• playbackRate : alias
• playbackState : alias
• position : alias
• seekable : alias
• source : alias
• status : alias
• volume : alias

Signals

• paused()
• playing()
• stopped()

Methods

• pause()
• play()
• seek(offset)
• stop()

Detailed Description

The AlphaVideo component internally uses the MediaPlayer, VideoOutput and ShaderEffect QML components to realize transparency for videos.

In order to use this component, it is necessary to correctly set up your videos in a special way. The reason for that is, that many video formats do not support alpha-channels for transparency. Especially important formats for final rendering with high compression rates can't be used. As file sizes and cross-platform compatibility are highly relevant for mobile games and apps, a restriction to only allow formats that support alpha-channels is not a viable solution.

But with a simple workaround, it is possible to use all available video formats. The basic idea is to split up the video into a color part and a transparency part. Look at the following example to see what the input video and the rendered video look like:

On the left side you can see the original input video. It contains two versions of the same animation:

• At the top, we can see the animation with colors on a black background.
• Directly below, the second animation shows the areas that should be visible in this video. Black areas will be transparent.

The AlphaVideo component reads the input video and combines both videos parts into a single transparent video.

Example Usage

You can show such alpha-videos in your app or game, just like you would show a normal video without transparency. All properties, methods and signals of the Video QML component are also available for the AlphaVideo.

This small code snipped shows the alpha-video "AlphaAnimation.mp4" uniformly scaled to the scene size. The playback starts automatically and the video is infinitely looped.

 import Felgo 3.0
 import QtQuick 2.0
 import QtMultimedia 5.0

 GameWindow {
   id: gameWindow
   activeScene: scene

   screenWidth: 960
   screenHeight: 640

   Scene {
     id: scene

     // the "logical size" - the scene content is auto-scaled to match the GameWindow size
     width: 480
     height: 320

     // show alpha video
     AlphaVideo {
       source: "../assets/AlphaAnimation.mp4"
       autoPlay: true
       anchors.fill: scene
       loops: MediaPlayer.Infinite // playback loop
     }
   }
 }

For the loops property, you can use the enum MediaPlayer.Infinite. That's why the statement import QtMultimedia 5.0 is necessary. For other properties, like playbackState or fillMode, different enum types from the MediaPlayer or the VideoOutput component are used. If you don't need any of these enum-types, you can skip the import and use the AlphaVideo directly.

The next section focuses on how to prepare an alpha-video, that can be used by the component.

How to Create an Alpha-Video

If you already have a video animation, that you wan't to include in your project, several steps are required to correctly set up your alpha-video:

• First, render your video as you normally would, without any transparency.
• Then, render a second version of the same video, that only holds the alpha-channel information.
• As the last step, place both videos above each other to create a new video, that holds all the data.
• The AlphaVideo component then automatically takes care of combining both videos to show a single video with transparency.

You can decide for yourself which software you want to use to create the video. The important thing is, that it's possible to render only the alpha-channel as a single video. The next section gives a step-by-step guide on how to create an alpha-video with Adobe After Effects.

Creating an Alpha-Video with Adobe After Effects

Rendering the RGB-Video

The first step is to render your animation just with rgb-colors.

1. Add the composition, that holds your animation, to the Render Queue.
2. Select a lossless format, as we don't want to compress the intermediate videos. E.g. uncompressed AVI or Quicktime.
3. In the Output Module Settings, only select the RGB-channel.

   

4. Render the video.

Rendering the Alpha-Channel

Once you rendered the non-alpha part of your video, you can go on with rendering the alpha-channel. The procedure is nearly the same.

1. Add the composition, that holds your animation, to the Render Queue.
2. Again, select a lossless format for the intermediate video.
3. In the Output Module Settings, only select the Alpha-channel.

   

4. Render the video.

Combining both Videos

Now it's time to combine both videos into a single one.

1. Create a new composition, with double the height of the original video.
2. Add the rgb-video and align it to the top of the composition.
3. Add the alpha-video and align it to the bottom of the composition. The two videos should perfectly fit into the composition and shouldn't overlap.

With this you finished preparing your alpha-video, all thats left is to render and use it.

Exporting the Final Video

When rendering the final video, you can choose any video format or compression setting that you like. But keep in my mind that big file sizes should be avoided for mobile games and apps.

You can also use the Adobe Media Encoder for the final rendering. The Media Encoder supports many different formats and gives better control over compression rates and file sizes.

One of the most used and best supported formats is MP4, which is also what we recommend to use.

Property Documentation

Signal Documentation

Method Documentation