How to play a video with VideoPlayer in SwiftUI

VideoPlayer - is a view that displays content from a player and a native user interface to control playback.

Available iOS 14.0+, macOS 11.0+, Mac Catalyst 14.0+, tvOS 14.0+, watchOS 7.0+, Xcode 12.0+.

How to use the VideoPlayer view? Go to the code below:

import AVKit // 1
import SwiftUI

struct ContentView: View {

    // 2
    let videoUrl = URL(fileURLWithPath: Bundle.main.path(forResource: "PexelsSea", ofType: "mp4")!)

    var body: some View {
        VideoPlayer(player: AVPlayer(url: videoUrl)) // 3
            .frame(height: 320)
    }
}

1. The first step is to import the AVKit framework.
2. The second step is create video URL. The URL can be created for local video or remote. In our code case, a URL was created for local video from the bundle.
3. Final step is to pass AVPlayer, as the first parameter to VideoPlayer view.

The VideoPlayer view has playback controls.

Result:

Video Overlay (Watermark)

A VideoPlayer has another init function with two parameters:

init(player: AVPlayer?,
     @ViewBuilder videoOverlay: () -> VideoOverlay
)

1. First parameter is AVPlayer.
2. Second parameter is videoOverlay closure. The closure returns a VideoOverlay view to present over the player’s video content. The important thing is this overlay view is fully interactive, but is placed below the system-provided playback controls, and only receives unhandled events.

Let's go to the code. As an example, will add a simple text in the lower right corner.

import AVKit 
import SwiftUI

struct ContentView: View {

    let videoUrl = URL(fileURLWithPath: Bundle.main.path(forResource: "PexelsSea", ofType: "mp4")!) 

    var body: some View {
         VideoPlayer(player: AVPlayer(url: url), videoOverlay: {
             VStack {
                 Spacer()
                 HStack {
                     Spacer()
                     Text("Code sample by ToniDevBlog")
                         .foregroundColor(.white)
                 }
             }.padding()
         }).frame(height: 320)
     }
}

Result:

Full source code available on GitHub

Article originally published at ToniDevBlog

Thanks for reading! See you soon. 👋