We have now released the api.video Swift player! The Swift player helps you to playback your videos easily in your iOS and iPadOS applications.

In this tutorial we will see how to add the Swift player into your code.

The Swift player package allows you to use UIKit and SwiftUI to handle multi-platform projects. The Swift player package is available on both Cocoapods and Swift Package Manager (SPM).

Before starting with this tutorial, make sure that you set your minimum target to iOS 13 and above.

To just give you a quick preview, we are going to create a Swift application with an api.video player that looks like this:

Upload video

Before starting to add the api.video Swift player to your application, you need to upload at least one video to your api.video account. If you haven't yet, see how to upload a video.

You'll need a video Id to use this component and play a video from api.video. To get yours, follow these steps:

1. Log into your account or create one here.
2. Copy your API key (sandbox or production if you are subscribed to one of our plans).
3. Go to the official api.video documentation.
4. Log into your account in the top right corner. If it's already done, make sure that it's the account you want to use.
5. Go to API Reference -> Videos -> List all videos
6. On the right, be sure the Authentication section contains the API key you want to use.
7. Generate your upload token by clicking the Try It! button in the right section
8. Copy the videoId value of one of elements of the response in the right section.

Alternatively, you can find your video Id in the video details of your dashboard.

Add the api.video Swift player

In this section, we will go through the three main steps of adding the api.video Swift player to your iOS application.

1. Add the ApiVideoPlayer package to your app with:

a. Cocoapods add the following to your Podfile

pod 'ApiVideoPlayer', '1.0.5'

then run :

pod install

pod install

b. SPM Add the following to your package.swift

dependencies: [
.package(url: "https://github.com/apivideo/api.video-swift-player.git", from: "1.0.5"),
],

2. UIKit

a. Import the package

import ApiVideoPlayer

b. Instantiate the player view with the player events:

let playerView: ApiVideoPlayerView = {
        let events = PlayerEvents(
            didPause: {() in
                print("paused")
            },
            didPlay: {() in
                print("play")
            },
            didReplay: {() in
                print("video replayed")
            },
            didLoop: {() in
                print("video replayed from loop")
            },
            didSetVolume: {(volume) in
                print("volume set to : \(volume)")
            },
            didSeek: {(from, to)in
                print("seek from : \(from), to: \(to)")
            }
 
        )
        
        return ApiVideoPlayerView(frame: .zero, videoId: "YOUR_VIDEO_ID", videoType: VideoType.vod /* only .vod is supported */, events: events)
    }()

(!) Replace “YOUR_VIDEO_ID” by your own videoId to display video

c. Implement the player view in your view controller

override func viewDidLoad() {
    ...
    self.addSubview(playerView)
    ...
}

d. To use fullscreen and subtitles

override func viewDidAppear(_ animated: Bool) {
    ...
    playerView.viewController = self
    ...
}

3. SwiftUI

a. Import the ApiVideoPlayer package

struct ContentView: View {
	...
	private var player: ApiVideoPlayer
	init() {
	    let even

b. In your view you have to instantiate the player and the player events in the init method

struct ContentView: View {
	...
	private var player: ApiVideoPlayer
	init() {
	    let events = PlayerEvents(
	        didPause: { () in
	            print("paused")
	        },
	        didPlay: { () in
	            print("play")
	        },
	        didReplay: { () in
	            print("video replayed")
	        },
	        didLoop: { () in
	            print("video replayed from loop")
	        },
	        didSeek: { from, to in
	            print("seek from : \(from), to: \(to)")
	        },
	        didError: { error in
	            print("error \(error)")
	        }
	    )
	    self.player = ApiVideoPlayer(videoId: "YOUR_VIDEO_ID", videoType: .vod, events: events)
	}
	...
}

(!) Replace “YOUR_VIDEO_ID” by your own videoId to display video

c. In the body you have to add the player with the specification you want

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

You will be able to use all the methods available externally, by calling player.methodName, for example :

player.play()

If you're looking for an easy way to integrate video into your application, check out our docs and sign up for a free account.