DEV Community

Cover image for AVKit Integration in iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on

AVKit Integration in iOS 18 - #30DaysOfSwift

Day 23: AVKit Integration – Playing Videos and Media in SwiftUI 🎬

Today, we’ll explore how to integrate AVKit into your SwiftUI project.

AVKit is the framework that lets you play videos and audio seamlessly with built-in controls.

Image description

Comments for Customization:

  • player.play(): This starts video playback.
  • cornerRadius(10): This rounds the corners of the video view, making it visually appealing.
  • frame(height: 300): The video player is confined to a specific height, ensuring a clean layout.

Here's the code for the implementation shown:

import AVKit
import SwiftUI

struct VideoPlayerView: View {
    private var player = AVPlayer(url: URL(string: "https://www.example.com/samplevideo.mp4")!)

    var body: some View {
        VStack {
            VideoPlayer(player: player)
                .frame(height: 300)
                .cornerRadius(10)

            HStack {
                Button("Play Video") {
                    player.play()
                }
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .background(Color.blue)
                .cornerRadius(8)

                Button("Pause Video") {
                    player.pause()
                }
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .background(Color.red)
                .cornerRadius(8)
            }
            .padding(.top, 20)
        }
        .padding()
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Welcome to Video Player")
                .font(.largeTitle)
                .padding()

            VideoPlayerView()
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

The full series is available on my profile and the components can also be found at shipios.app/components.

Happy Coding! 🎨

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more