Play an HEVC video with transparency in SwiftUI
GIF's kinda suck. This is why we included a way to play HEVC videos in SwiftUI as a more efficient alternative to GIFs.
The VideoPlayerAlphaView is a view that plays an HEVC videos on repeat in SwiftUI.
View declaration:
VideoPlayerAlphaView.swift
public struct VideoPlayerAlphaView: UIViewRepresentable {
public init(
url: URL,
repeatCount: RepeatCount = .never,
keepsAspectRatio: Bool = true
) { }
}url- The URL of the HEVC video. (Can also be a local bundle URL)repeatCount- (Optional) The number of times the video should repeat. See RepeatCount definition below. (Default:.never)keepsAspectRatio- (Optional) Whether the video should keep its aspect ratio. (Default:true)
RepeatCount definition:
VideoPlayerAlphaView.swift
public enum RepeatCount: Equatable {
case infinite // Will keep looping
case constant(Int) // How many times it should play, so `.constant(7)` will play 7 times
case never // Will play only once, equivalent to `.constant(1)`
}Usage Example
From the InAppPurchaseView() paywall hero view of InAppPurchaseKit:
InAppPurchaseView.swift
import RevenueCat
import RevenueCatUI
import SharedKit
import SwiftUI
// ...Other imports
struct InAppPurchaseView: View {
// ...
var body: some View {
InAppPurchaseCarousel(heroTitle: paywallHeroTitle)
.paywallFooter(purchaseCompleted: onPurchaseCompleted) // RevenueCatUI's Paywall Footer
}
private struct InAppPurchaseCarousel: View {
private let timer = Timer.publish(every: 5, on: .main, in: .common).autoconnect()
var body: some View {
TabView(selection: $page) {
PaywallHeroView(title: heroTitle)
// ...Second Paywall Carousel View
// ...Third Paywall Carousel View
}
.accentBackground(strong: true)
.tabViewStyle(.page(indexDisplayMode: .never))
.onReceive(timer) { time in
// ...auto scroll pages
}
}
}
private struct PaywallHeroView: View {
// ...
var body: some View {
VStack {
VideoPlayerAlphaView(
url: Bundle.module.url(forResource: "paywall-hero-vid", withExtension: "mov")!,
keepsAspectRatio: true
)
// ...Paywall Hero Title
}
.ignoresSafeArea(.container, edges: .top)
}
}
}Here's how it looks like in the app. (The VideoPlayerAlphaView() in the first view of the carousel seemlessly blends with the accent colored background)
