Video in SwiftUI

SwiftUI is a powerful framework for building user interfaces on Apple platforms, and it provides a wide range of features and tools for displaying and manipulating video content. In this blog post, we’ll explore how to present a video in SwiftUI, and discuss some of the key concepts and techniques involved in working with video in SwiftUI.

To present a video in SwiftUI, we can use the VideoPlayer view provided by the AVKit framework. The VideoPlayer view is a powerful, full-featured video player that can be easily integrated into a SwiftUI app. It provides all the basic functionality you would expect from a video player, such as play, pause, and seek controls, as well as more advanced features like picture-in-picture and AirPlay support.

To use the VideoPlayer view, you first need to import the AVKit framework. You can do this by adding the following line at the top of your Swift file:

import AVKit

Next, you can create an instance of the VideoPlayer view and pass it a URL for the video you want to play. You can create the URL object in a number of ways, for example, if the video is in your project’s bundle or from a remote URL.

struct ContentView: View {
   let player = AVPlayer(url: URL(string: "https://www.youtube.com/watch?v=q5D55G7Ejs8")!)
   var body: some View {
       VideoPlayer(player: player)
   }
}

The VideoPlayer view has a number of customizations available to you. You can control the video’s aspect ratio, control its playback rate, mute the video, add a custom overlay, and so on.

   VideoPlayer(player: player)
            .aspectRatio(contentMode: .fit)
            .onDisappear(perform: {player.pause()})

Additionally, you can also add custom gesture controls to the video player. For example, you can use the tapGesture modifier to add a tap gesture that pauses or plays the video, or the dragGesture modifier to add a drag gesture that allows users to scrub through the video.

Using UIViewControllerRepresentable

Using AVPlayer from UIKit can be a powerful solution for adding basic video functionality to your SwiftUI app. However, if you need to access the full capabilities of AVKit, you may find that not all of the functionality is exposed in the VideoPlayer View. For example, if you need to change the playback speed or access a full-screen button, you’ll need to use the AVPlayerViewController or similar.

One solution to access the full functionalities of AVKit, is by creating a UIViewControllerRepresentable video player. This approach allows you to use the UIKit version of AVPlayer while still keeping your SwiftUI codebase. To do this, you can create a new Swift file called PlayerViewController or similar, and implement the UIViewControllerRepresentable protocol to expose the UIKit view to your SwiftUI view.

import SwiftUI
import AVKit

struct PlayerViewController: UIViewControllerRepresentable {
    var url: URL
    private var player: AVPlayer {
       AVPlayer(url: url)
    }

    func makeUIViewController(context: Context) -> AVPlayerViewController {
        let controller = AVPlayerViewController()
        controller.modalPresentationStyle = .fullScreen
        controller.player = player
        controller.player?.play()
        return controller
    }

    func updateUIViewController(_ playerController: AVPlayerViewController, context: Context) {}
}

struct ContentView: View {
   let url = URL(string: "https://www.youtube.com/watch?v=q5D55G7Ejs8")!
   var body: some View {
       PlayerViewController(url: url)
   }
}

In conclusion, displaying video in SwiftUI is a straightforward task and the AVKit framework provides a lot of functionality to customize the video player. Using the VideoPlayer view, you can easily add video playback functionality to your app, and use the various customizations available to make it look and behave the way you want. With the power of SwiftUI, it becomes much more simpler to build dynamic video player and provide better user experience.

✍️ Written by Ishtiak Ahmed

👉 Follow me on X ● LinkedIn

---

Get Ready to Shine: Mastering the iOS Interview

• Ace iOS Coding Interview
• Uplift iOS Interview - A Comprehensive Guide to iOS Interview

---

Enjoying the articles? Get the inside scoop by subscribing to my newsletter.

Get access to exclusive iOS development tips, tricks, and insights when you subscribe to my newsletter. You'll also receive links to new articles, app development ideas, and an interview preparation mini book.