Play Transparent Video

Question

Created Jul ’22

Replies 2

Boosts 3

Views 4.1k

Participants 4

I was sent a video (made in after effects) with an alpha channel (has transparency). I need to add that video to an iOS app, like adding a transparent GIF.

There is this tutorial https://medium.com/@quentinfasquel/ios-transparent-video-in-swiftui-92a9a1cce94e online on how to do just that, however he is using a single mp4 that displays alpha info on the bottom and the colour info on the top, I am using Quicktime 444 which is already transparent by nature. Is there anyway I can play a transparent video on Swift for iOS? I am using SwiftUI.

Answered by DTS Engineer in 722071022

Hello,

SwiftUI does have the VideoPlayer view, but it appears that this view does not have a transparent background, so although AVPlayer should respect the alpha channel of your asset, it won't actually have an effect in VideoPlayer because of the opaque background of the view itself.

First, I recommend that you file an enhancement request for the issue I just mentioned using Feedback Assistant.

Then, I recommend that you take a look at this sample code: https://developer.apple.com/documentation/avfoundation/media_playback/using_hevc_video_with_alpha

It demonstrates how you can create a "player view" with a clear background to support video that has an alpha channel using SpriteKit. For this to also work for you in SwiftUI, you would also need to implement a representable container of your custom "player view" using UIViewRepresentable.

Boost

Answer 1

DTS Engineer OP

Apple

Jul ’22

Accepted Answer

Hello,

SwiftUI does have the VideoPlayer view, but it appears that this view does not have a transparent background, so although AVPlayer should respect the alpha channel of your asset, it won't actually have an effect in VideoPlayer because of the opaque background of the view itself.

First, I recommend that you file an enhancement request for the issue I just mentioned using Feedback Assistant.

Then, I recommend that you take a look at this sample code: https://developer.apple.com/documentation/avfoundation/media_playback/using_hevc_video_with_alpha

It demonstrates how you can create a "player view" with a clear background to support video that has an alpha channel using SpriteKit. For this to also work for you in SwiftUI, you would also need to implement a representable container of your custom "player view" using UIViewRepresentable.

2

Answer 2

jonbuehler OP

May ’24

For anyone landing here looking to play videos in SwiftUI with transparency... there's a better solution than the AVFoundation tutorial above.

Cobbled together with a few steps from a few places, here it is.

Use this simple work-around to avoid VideoPlayer. It does not require SpriteKit or SceneKit or anything heavy like that.

https://stackoverflow.com/questions/56822943/how-to-show-my-avplayer-in-a-vstack-with-swiftui

If you're using AfterEffects (like me), ensure you export to Apple ProRes 4444 with alpha. Recommend you use the Media Encoder if possible, it is likely better than native AE. Do not try to use h265 directly in AE, Adobe still doesn't support HEVC transparency (as of 2024 anyway). Maybe its out of spec, maybe not. Apple found a way.
Using your Finder app, right click the 4444 .mov. file and select "Services -> Encode Selected Video Files". Pick HEVC and check "preserve transparency". See this link

https://community.adobe.com/t5/adobe-media-encoder-discussions/encoding-video-to-hevc-h-265-with-alpha-channel-can-t-get-transparency/td-p/13656952

Import the HEVC .mov file using the Bundle URL, load it into the AVPlayer wrapper from step #1, and you should have working transparency!
Profit and plunder.

1