Play video from URL in SwiftUI using AVKit

In this basic tutorial, I will show you how to play any video from a remote URL in SwiftUI using AVKit.

Our first step is to import AVKit.

Play video from URL

It is simple to do.

import SwiftUI
import AVKit
struct ContentView: View {

    var body: some View {
        VideoPlayer(player: AVPlayer(url: URL(string: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")!))
        
        }
}

It takes AVPlayer as an argument. Do not forget to use that optional (!) otherwise, it will through an error like Value of optional type 'URL?' must be unwrapped to a value of type 'URL'

If you run this on the simulator, it won’t play the video but it will work fine on an actual device. The reason is we are using http here instead of https.

So use https.

You can change the URL to play different videos.

The URL should be the actual file URL.

It will play in full screen. In the next part, I will be adding a frame to our video player. So that it looks like this:

Add a play button to start your video

import SwiftUI
import AVKit

struct ContentView: View {
    // Create an AVPlayer with the video URL
    let avPlayer = AVPlayer(url: URL(string: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")!)

    var body: some View {
        VStack {
            Button("Play Video") {
                            // Action to perform when the button is clicked
                            playVideo()
                        }
                        .padding()
                        .foregroundColor(.white)
                        .background(Color.blue)
                        .cornerRadius(10)
            // Embed the VideoPlayer in your view
            VideoPlayer(player: avPlayer)
                .scaledToFit()
                .frame(height: 300)
                
        }
    }
    func playVideo() {
            // Start playing the video
            avPlayer.play()
        }
}

Here I have added a button to start the video.

If you wish you can also use onAppear to start the video automatically when the view appears.

.onAppear {
// Auto-play the video when the view appears
       avPlayer.play()
}

You need to insert the above code here:

// Embed the VideoPlayer in your view
            VideoPlayer(player: avPlayer)
                .scaledToFit()
                .frame(height: 300)
                .onAppear {
                    // Auto-play the video when the view appears
                    avPlayer.play()
                }

Play video from a specific time in SwiftUI using AVKit / AVPlayer

We will simply take a variable to store our starting time like this:

let startTime: Double = 30.0

So that we can start from 30 seconds. You can take any value as per your requirement. Make sure it does not exceed the video duration.

And onAppear we will use this:

avPlayer.seek(to: CMTime(seconds: startTime, preferredTimescale: 1))

You can also do this with your custom button instead of .onAppear

Full code:

import SwiftUI
import AVKit

struct ContentView: View {
    // Create an AVPlayer with the video URL
    let avPlayer = AVPlayer(url: URL(string: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")!)

    // Set the specific time to start playing the video (in seconds)
    let startTime: Double = 30.0

    var body: some View {
        VStack {
            // Embed the VideoPlayer in your view
            VideoPlayer(player: avPlayer)
                .scaledToFit()
                .frame(height: 300)
                .onAppear {
                    // Set the current time of the video player
                    avPlayer.seek(to: CMTime(seconds: startTime, preferredTimescale: 1))
                    // Auto-play the video when the view appears
                    avPlayer.play()
                }
        }
    }
}

If you run this, it will start playing the video from 30 seconds.

Also read: How to play an MP3 File in Swift Storyboard