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)