AlphaVideo

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

Import Statement: import VPlay 2.0
Inherits:

Item

Properties

Signals

Methods

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 "VPlayAlphaAnimation.mp4" uniformly scaled to the scene size. The playback starts automatically and the video is infinitely looped.

import VPlay 2.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/VPlayAlphaAnimation.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

autoLoad : alias

This property indicates if loading of the media should begin immediately. The default value is true. If it is set to false, media will not be loaded until playback is started


autoPlay : alias

This property determines whether the media should begin playback automatically. Setting it to true also sets autoLoad to true. The default is false.


read-onlyavailability : alias

Returns the availability state of the alpha-video instance. This is one of:

Value Description
MediaPlayer.Available The video player is available to use.
MediaPlayer.Busy The video player is usually available, but some other process is utilizing the hardware necessary to play media.
MediaPlayer.Unavailable There are no supported video playback facilities.
MediaPlayer.ResourceMissing There is one or more resources missing, so the video player cannot be used. It may be possible to try again at a later time.

Because the AlphaVideo type internally uses the MediaPlayer QML component, enumerations from MediaPlayer are used to access the availability state.


read-onlybufferProgress : alias

This property holds how much of the data buffer is currently filled, from 0.0 (empty) to 1.0 (full).


read-onlyduration : alias

This property holds the duration of the media in milliseconds. If the media doesn't have a fixed duration (a live stream for example) this will be 0.


read-onlyerror : alias

This property holds the error state of the video. It can be one of:

Value Description
MediaPlayer.NoError There is no current error.
MediaPlayer.ResourceError The video cannot be played due to a problem allocating resources.
MediaPlayer.FormatError The video format is not supported.
MediaPlayer.NetworkError The video cannot be played due to network issues.
MediaPlayer.AccessDenied The video cannot be played due to insufficient permissions.
MediaPlayer.ServiceMissing The video cannot be played because the media service could not be instantiated.

Because the AlphaVideo type internally uses the MediaPlayer QML component, enumerations from MediaPlayer are used to access the error state.


read-onlyerrorString : alias

This property holds a string describing the current error condition in more detail.


fillMode : alias

Set this property to define how the video is scaled to fit the target area.

Value Description
VideoOutput.Stretch The video is scaled to fit.
VideoOutput.PreserveAspectFit The video is scaled uniformly to fit without cropping.
VideoOutput.PreserveAspectCrop The video is scaled uniformly to fill. It is cropped if necessary.

Because the AlphaVideo type internally uses the VideoOutput QML component, enumerations from VideoOutput are used to access the available fill modes. The default fill mode is PreserveAspectFit.


read-onlyhasAudio : alias

This property holds whether the current media has audio content.


read-onlyhasVideo : alias

This property holds whether the current media has video content.


loops : alias

This property holds the number of times the media is played. A value of 0 or 1 means the media will be played only once. Set it to MediaPlayer.Infinite to enable infinite looping. The value can be changed while the media is playing, in which case it will update the remaining loops to the new value. The default is 1.


read-onlymetaData : alias

This property may be used to access the video's meta-data. For more information, see the MediaPlayer documentation page.


muted : alias

This property holds whether the audio output is muted.


orientation : alias

The orientation of the video in degrees. Only multiples of 90 degrees are supported, that is 0, 90, 180, 270, 360, etc.


playbackRate : alias

This property holds the rate at which video is played at as a multiple of the normal rate.


read-onlyplaybackState : alias

This read only property indicates the playback state of the media.

Value Description
MediaPlayer.PlayingState The media is playing.
MediaPlayer.PausedState The media is paused.
MediaPlayer.StoppedState The media is stopped.

Because the AlphaVideo type internally uses the MediaPlayer QML component, enumerations from MediaPlayer are used to access the playback state. The default state is MediaPlayer.StoppedState.


read-onlyposition : alias

This property holds the current playback position in milliseconds. To change this position, use the seek() method.


read-onlyseekable : alias

This property holds whether the playback position of the video can be changed. If true, calling the seek() method will cause playback to seek to the new position.


source : alias

This property holds the source URL of the media.


read-onlystatus : alias

This property holds the status of media loading. It can be one of:

Value Description
MediaPlayer.NoMedia No media has been set.
MediaPlayer.Loading The media is currently being loaded.
MediaPlayer.Loaded The media has been loaded.
MediaPlayer.Buffering The media is buffering data.
MediaPlayer.Stalled Playback has been interrupted while the media is buffering data.
MediaPlayer.Buffered The media has buffered data.
MediaPlayer.EndOfMedia The media has played to the end.
MediaPlayer.InvalidMedia The media cannot be played.
MediaPlayer.UnknownStatus The status of the media cannot be determined.

As the AlphaVideo type internally uses the MediaPlayer QML component, enumerations from MediaPlayer are used to access the media loading status.


volume : alias

This property holds the volume of the audio output, from 0.0 (silent) to 1.0 (maximum volume).


Signal Documentation

paused()

This signal is emitted when playback is paused. The corresponding handler is onPaused.


playing()

This signal is emitted when playback is started or continued. The corresponding handler is onPlaying.


stopped()

This signal is emitted when playback is stopped. The corresponding handler is onStopped.


Method Documentation

pause()

Pauses playback of the media.


play()

Starts playback of the media.


seek( offset)

If the seekable property is true, seeks the current playback position to offset. Seeking may be asynchronous, so the position property may not be updated immediately.


stop()

Stops playback of the media.


Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support
Sign up for Free and start developing right away!
I want to make Games
I want to make Apps
Game Development
Cross-Platform, Any Resolution

Use one IDE to deploy to all supported platforms, including iOS and Android, from a single code base.

Support all screen resolutions, aspect ratios and sizes with auto-adapting UI elements, smart scene scaling and memory efficient asset selection.

Learn More

V-Play ranked #1 at research2guidance cross-platform tool benchmarking 2014 by 2188 developers comparing 40 leading tools.

Multiplayer

V-Play Multiplayer supports both real-time and turn-based gameplay, so you can use it to make many different types of cross-platform multiplayer games. It's perfect for making player-vs-player games like 'Words with Friends' or games for a large amount of players, such as 'Clash of Clans'.

Learn More Video

Highscores & Achievements

The V-Play Game Network is a cross-platform gaming service that allows players around the world to compare game highscores and achievements. Players can also challenge each other across multiple platforms and share their progress on Facebook.

Learn More

QML & JavaScript

Qt Meta Language is a highly intuitive reactive language, which is super easy to learn, yet it's extremely powerful and flexible. Mix it with JavaScript to create awesome stuff, with just a few lines of code.

import QtQuick 2.0
import VPlay 2.0

GameWindow {
  Scene {
    
    SimpleButton {
      anchors.centerIn: parent
      text: "Press Me"
      onClicked: {
        console.debug("Wow you pressed me!")
      }
    }
  }
}

Learn More

Monetize & Analyze

With V-Play, you can use many 3rd party services for ads, in-app purchases, analytics and more, with just a few lines of code. All of these plugins work cross-platform, which allows you to maintain a single code base.

Learn More

Level Editor

The LevelEditor can be used during development to create and modify levels for your game, which you can then bundle in your final publishing build. Additionally, you can also integrate the in-game level editor to your published game and let your gamers create new levels.

Learn More Video

Card Game like UNO, Hearthstone or Poker

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/OneCard/OneCard.pro

Match-3 like Candy Crush Saga

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/JuicySquash/JuicySquash.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/JuicySquashAdvanced/JuicySquashAdvanced.pro

Puzzle like 2048 or Threes!

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/2048/2048.pro

Casino like Big Win Slots

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/FlaskOfRum/FlaskOfRum.pro

Side Scroller like Jetpack Joyride or Flappy Bird

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/FlappyBird/FlappyBird.pro

Tower Defense like Castle Defense or Bloons TD

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/Squaby/Squaby.pro

Falldown & Jump like Doodle Jump or Mega Jump

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/ChickenOutbreak/ChickenOutbreak.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/ChickenOutbreak2/ChickenOutbreak2.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/DoodleJump/DoodleJump.pro

Platformer like Super Mario or Lep's World

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/Platformer/Platformer.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/PlatformerWithLevelEditor/PlatformerWithLevelEditor.pro

Action like Angry Birds, Fruit Ninja, Cut the Rope

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/StackTheBoxWithCommunityEditor/StackTheBoxWithCommunityEditor.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/BalloonPop/BalloonPop.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/CarChallenge/CarChallenge.pro

Arcade like Arkanoid or Space Invaders

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/demos/ZombieBreak/ZombieBreak.pro

Community like Super Mario Maker or Minecraft

We got a demo game for you!

The V-Play SDK includes an open-source demo for this game genre. You can use its source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/examples/Squaby/Squaby.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/StackTheBoxWithCommunityEditor/StackTheBoxWithCommunityEditor.pro

<Path to V-PlaySDK>/Examples/V-Play/demos/PlatformerWithLevelEditor/PlatformerWithLevelEditor.pro

Any other Idea? let us know how we can help you

You are looking for another demo?

The V-Play SDK includes many open-source demos for different game genres. You can use their source code and build your game in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

If you do not find your game genre in this list and wonder if V-Play is the right choice, just contact us, we are happy to help!

Contact Us

App Development
Better Apps, Less Effort

Develop feature-rich, cross-platform mobile apps from a single code base.

V-Play apps look, feel and perform exactly like native iOS, Android and Desktop apps. With less code & much faster development time.

Learn More Highlights Video

V-Play ranked #1 at research2guidance cross-platform tool benchmarking 2014 by 2188 developers comparing 40 leading tools.

Save Time, Code & Money

Save up to 90% source code with V-Play, compared to frameworks like Xamarin, Titanium, React Native and others.

Learn More

QML & JavaScript

Qt Meta Language is a highly intuitive reactive language, which is super easy to learn, yet it's extremely powerful and flexible. Mix it with JavaScript to create awesome stuff, with just a few lines of code. QML also allows you to easily create smooth and complex animations.

import QtQuick 2.0
import VPlayApps 2.0

App {
  Page {
    
    AppButton {
      anchors.centerIn: parent
      text: "Press Me"
      onClicked: {
        console.debug("Wow you pressed me!")
      }
    }
  }
}

Learn More

Monetize & Analyze

With V-Play, you can use many 3rd party services for ads, in-app purchases, analytics and more, with just a few lines of code. All of these plugins work cross-platform, which allows you to maintain a single code base.

Learn More

Native Sensors & More

V-Play Apps harness the power of Qt, the leading cross-platform development framework used by over 1,000,000 developers.

This gives your access to native device features like sensors, camera, file system as well as multimedia, networking, localization and much more.

Learn More

Responsive Design

V-Play has built in responsive design capabilities, you can target phones and tablets with the same source code.

Learn More

Highly Extensible

You have existing JavaScript, C++ or native code? You want to add any 3rd party SDK that we do not offer already?

No worries, you can add any JS, C++, Java or Objective-C code to your project.

Learn More

Component Showcase App shows the most important V-Play features and components

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/showcase/Showcase.pro

Qt World Summit Conference App a full-featured conference management app made by V-Play

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/qtws2016/QtWS2016.pro

Twitter App how to build layouts like in the official Twitter app for iOS and Android

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/twitter/Twitter.pro

Maps App displays free bikes or boxes at bike stations for Vienna's bike sharing service Citybike Wien

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/maps/Maps.pro

Messaging App demonstrates how to create the UI of a Facebook Messenger like app

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/messaging/Messaging.pro

Weather App how to include powerful animations into your user interface

We got a demo app for you!

The V-Play SDK includes an open-source demo for this app type. You can use its source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play.

<Path to V-PlaySDK>/Examples/V-Play/appdemos/waether/Weather.pro

Any other Idea? let us know how we can help you

You are looking for another app demo?

The V-Play SDK includes many open-source demos for different app types. You can use their source code and build your app in record time. After installing V-Play, you can simply open the .pro file with Qt Creator, the development environment used for V-Play..

If you do not find your app type in this list and wonder if V-Play is the right choice, just contact us, we are happy to help!

Contact Us