Video Animated Launch Screen in SwiftUI

iOS – How to play a MP4 video on the launch screen when the app loads in SwiftUI

SwiftUI Video Launch Screen
SwiftUI Video Launch Screen

A video-animated launch screen in SwiftUI can breathe life into your app’s initial moments, offering users a visually captivating introduction. SwiftUI’s flexibility allows for the seamless integration of animations, and incorporating a video element can add a dynamic touch. In this example, we showcase a straightforward implementation of a video-animated launch screen using SwiftUI.

Below is a basic example of how you can implement a video animated launch view in SwiftUI:

import SwiftUI
import AVKit

struct VideoLaunchScreen: View {
    var body: some View {
        VideoPlayer(player: AVPlayer(url: Bundle.main.url(forResource: "launch_video", withExtension: "mp4")!)) {
            // You can customize the video player view here, such as adding controls or overlays.
        }
        .onAppear {
            // Start playing the video when the view appears.
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                // Adding a slight delay to enhance the user experience.
                AVPlayer.shared().play()
            }
        }
        .onDisappear {
            // Pause the video when the view disappears.
            AVPlayer.shared().pause()
        }
    }
}

@main
struct YourApp: App {
    var body: some Scene {
        WindowGroup {
            VideoLaunchScreen()
        }
    }
}

Implementation Overview: The VideoLaunchScreen SwiftUI view utilizes the VideoPlayer to display a video file named “launch_video.mp4.” This file should be included in your app’s resources. The onAppear modifier initiates the video playback when the view appears, introducing a slight delay for a smoother user experience. Additionally, the onDisappear modifier ensures that the video pauses when the view is no longer visible, optimizing resource usage.

Code Highlights:

  • Video Playback: Utilizing the AVKit framework, the AVPlayer is employed to handle video playback within the VideoPlayer view.
  • Customization: You have the flexibility to customize the video player view further, adding controls or overlays to enhance the user interface.

Usage Instructions:

  1. Replace “launch_video.mp4” with the actual name of your video file.
  2. Ensure that the video file is added to your Xcode project, included in the app’s target, and listed in the Copy Bundle Resources build phase.

By incorporating a video-animated screen in your SwiftUI project, you can create an engaging and memorable initial experience for users, setting the tone for their interaction with your app.

Play a MP4 video launch View SwiftUI

Video Animated Screen in SwiftUI

Add video “Splash.mp4” in Relative to Group in Xcode Project

ContentView.swift File

import SwiftUI
import AVKit


struct ContentView: View {
    
        var body: some View {
            NavigationView {
                ZStack {
                    let player = AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: "Splash", ofType: "mp4")!))
                                  VideoPlayer(player: player)
                                      .edgesIgnoringSafeArea(.all)
                                    .onAppear() {
                                        player.play()
                        }
                }
            }
        
    }
}


#Preview {
    ContentView()
}

AddVideoOnLaunchingScreenApp.Swift

import SwiftUI

@main
struct AddVideoOnLaunchingScreenApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Github – Video Launch Screen in SwiftUI

Leave a Reply

Your email address will not be published. Required fields are marked *