How to Build a Video Player in SwiftUI Using AVKit

A complete step-by-step tutorial in Xcode

Video is one of the most important content formats in modern applications. From educational apps to social networks, streaming platforms, and corporate apps, playing video efficiently with a great user experience is a basic requirement.

In this tutorial you will learn how to build a simple but functional video player in SwiftUI using AVKit, Apple’s official framework for audio and video playback. We will use Xcode, SwiftUI, and native iOS tools to create an app capable of playing both local and streaming videos.

By the end of this article you will know how to:

• Understand what AVKit is and how it integrates with SwiftUI
• Play a video from a URL
• Use VideoPlayer
• Control playback (play and pause)
• Improve the user experience

1. What is AVKit?

AVKit is Apple’s framework that provides a high-level interface for playing audiovisual content. It is built on top of AVFoundation, which is the low-level engine that manages audio and video streams.

AVKit provides ready-to-use components such as:

• AVPlayer
• AVPlayerItem
• AVPlayerViewController
• VideoPlayer (for SwiftUI)

Thanks to VideoPlayer, we can integrate a video player into SwiftUI with just a few lines of code.

2. Creating a new Xcode project

Let’s start from scratch.

1. Open Xcode
2. Click File → New → Project
3. Select iOS → App
4. Click Next
5. Set:
   • Product Name: SwiftUIVideoPlayer
   • Interface: SwiftUI
   • Language: Swift
6. Click Create

Xcode will create a project with a main file called SwiftUIVideoPlayerApp.swift and a view called ContentView.swift.

3. Import AVKit

Open ContentView.swift and add:

import SwiftUI
import AVKit

This gives us access to VideoPlayer and AVPlayer.

4. The key concept: AVPlayer

Before writing code, it’s important to understand what AVPlayer is.

AVPlayer is the object that:

• Loads the video
• Controls playback
• Manages buffering
• Allows you to play, pause, and stop

In SwiftUI, we usually create an instance of AVPlayer and pass it to VideoPlayer.

5. Creating our first video player

Let’s start with something simple: playing a video from a URL.

We will use this sample video:

https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4

Modify ContentView.swift like this:

struct ContentView: View {

    let player = AVPlayer(url: URL(string:
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")!)

    var body: some View {
        VideoPlayer(player: player)
            .onAppear {
                player.play()
            }
            .edgesIgnoringSafeArea(.all)
    }
}

Run the app in the simulator or on a real iPhone.
You should see the video playing automatically.

You now have a working video player!

6. Adding playback controls

Now let’s improve the app by adding Play and Pause buttons.

We will turn AVPlayer into a state property so we can control it:

struct ContentView: View {

    @State private var player = AVPlayer(url: URL(string:
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")!)

    var body: some View {
        VStack {
            VideoPlayer(player: player)
                .frame(height: 250)

            HStack(spacing: 40) {
                Button("Play") {
                    player.play()
                }

                Button("Pause") {
                    player.pause()
                }
            }
            .padding()
        }
    }
}

Now the user can control playback.

7. Playing local videos

You can also play videos that are bundled with your app.

1. Drag a .mp4 file into your Xcode project
2. Make sure Copy items if needed is checked

Then load it like this:

if let url = Bundle.main.url(forResource: "my_video", withExtension: "mp4") {
    player = AVPlayer(url: url)
}

This is ideal for intro videos, tutorials, or offline content.

8. Improving the UI

Let’s make the player look nicer:

VStack {
    VideoPlayer(player: player)
        .cornerRadius(12)
        .shadow(radius: 10)
        .padding()

    HStack {
        Button(action: {
            player.play()
        }) {
            Image(systemName: "play.fill")
                .font(.largeTitle)
        }

        Button(action: {
            player.pause()
        }) {
            Image(systemName: "pause.fill")
                .font(.largeTitle)
        }
    }
}

Now we have system icons for our controls.

9. Detecting when the video ends

We can observe when the video finishes:

.onReceive(NotificationCenter.default.publisher(for: .AVPlayerItemDidPlayToEndTime)) { _ in
    print("The video has finished")
}

ou can use this to show new content or restart the video.

10. Auto-play and cleanup

It’s good practice to start playback when the view appears and stop it when it disappears:

.onAppear {
    player.play()
}
.onDisappear {
    player.pause()
}

This prevents audio from continuing when the user leaves the screen.

11. Controlling audio

You can mute the video:

player.isMuted = true

Or adjust the volume:

player.volume = 0.5

12. Playing multiple videos

You can create a list of videos:

let videos = [
    "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
    "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
]

And load a new AVPlayer when the user selects one.

13. Best practices

• Always store AVPlayer in a @State variable
• Pause playback when the view disappears
• Avoid creating multiple AVPlayer instances unnecessarily
• Use H.264 or H.265 encoded videos for best performance

14. Conclusion

SwiftUI and AVKit make video playback incredibly easy. With just a few lines of code you can integrate professional-grade video playback into your app.

In this tutorial you learned how to:

• Use VideoPlayer
• Work with AVPlayer
• Play local and remote videos
• Control playback and volume
• Properly integrate video into a SwiftUI app

With these foundations you can now build educational apps, streaming platforms, media players, and much more.

If you have any questions about this article, please contact me and I will be happy to help you 🙂. You can contact me on my X profile or on my Instagram profile.