Adding Captions & Subtitles to Videos in SwiftUI

Written by Team Kodeco

Captions and subtitles significantly enhance the accessibility and inclusivity of video content. SwiftUI makes it easier to overlay text on a video player, effectively creating subtitles.

Note: If you want to try out the examples, you can download an archive of all the assets used in this section here.

The following example demonstrates the simplicity of this process:

import AVKit

struct ContentView: View {
  @State var player = AVPlayer(url: Bundle.main.url(forResource: "BookTrailer", withExtension: "m4v")!)
  @State var isPlaying: Bool = false
  @State var subtitleText: String = "Once upon a time, there was a programming book known as iOS Games..."
  
  var body: some View {
    VStack {
      ZStack {
        VideoPlayer(player: player) {
          VStack {
            Spacer()
            Text(subtitleText)
              .font(.caption)
              .foregroundColor(.white)
              .padding()
              .background(Color.black.opacity(0.7))
              .cornerRadius(10)
          }
        }
        .frame(width: 320, height: 180, alignment: .center)
        .onAppear {
          self.isPlaying = true
          player.play()
        }
      }
      Button {
        isPlaying ? player.pause() : player.play()
        isPlaying.toggle()
        player.seek(to: .zero)
      } label: {
        Image(systemName: isPlaying ? "stop" : "play")
          .padding()
      }
    }
  }
}

Your preview should look like this:

This recipe uses SwiftUI’s VideoPlayer view. The video file, located in the app bundle, is played using an AVPlayer instance. A subtitle is overlaid on the video using a ZStack, which allows you to stack views in layers.

The subtitle is a Text view, placed at the bottom of the video frame using a VStack and Spacer. This text view is styled to stand out against the video background: it’s white, with a slightly transparent black background, rounded corners and some padding.

The onAppear modifier ensures that the video automatically starts playing when the ContentView appears. A Button view below the video player allows users to play or pause the video.

The @State property wrapper is used for the player, isPlaying and subtitleText properties. This is because their values need to be mutable and should cause the view to re-render when they change.

This example illustrates how easily you can add customizable subtitles or captions to a video in SwiftUI. The subtitles are not time-synced to the video in this basic example; to achieve that, you would need to manage the subtitleText state based on the video’s current timestamp.