Crafting the Ultimate iOS Video Player: Part 2 — Demystifying Subtitle Handling

English Subtitles

In the second article of our Crafting the Ultimate iOS Video Player series, we’ll delve into the seamless integration of subtitles into your iOS app. By the end of this article, you’ll possess the skills to create a feature-rich video player that can effortlessly handle subtitles. This enhancement not only makes your app more inclusive but also adds an appealing feature that caters to a broader audience.

Before we dive into integrating subtitles in this second installment of our series, make sure to check out Part 1 of Crafting the Ultimate iOS Video Player series — Mastering Custom Control Setup if you haven’t already.

Customizing Subtitle Styling:

To create a visually appealing and user-friendly subtitle experience in your iOS app, it’s essential to define the styling of your subtitles. In the code snippet below, we’ve introduced the subtitleStyling property, which is an instance of AVTextStyleRule. This property allows us to specify various text attributes to control the appearance of subtitles displayed in our video player.

private let subtitleStyling = AVTextStyleRule(textMarkupAttributes: [
kCMTextMarkupAttribute_CharacterBackgroundColorARGB as String: [0.0, 0.0, 0.0, 0.4],
kCMTextMarkupAttribute_ForegroundColorARGB as String: [1.0, 1.0, 1.0, 1.0],
kCMTextMarkupAttribute_FontFamilyName as String: UIFont.systemFont(ofSize: 14).fontName,
])!

Here’s what each attribute does:

• kCMTextMarkupAttribute_CharacterBackgroundColorARGB: This attribute controls the background color of the characters in the subtitle text. In this example, we’ve set it to a semi-transparent black background with an ARGB value of [0.0, 0.0, 0.0, 0.4].
• kCMTextMarkupAttribute_ForegroundColorARGB: This attribute determines the foreground color of the subtitle text. Modify these values to control the text color to match your app’s theme.
• kCMTextMarkupAttribute_FontFamilyName: Here, we specify the system's preferred font for body. This ensures that the subtitle font aligns with the user's preferred text style settings, offering a consistent and accessible user experience.

We will apply the custom subtitle text style rules to the player item playerItem?.textStyleRules = [subtitleStyling] to customize the appearance of subtitles.

These attributes offer a starting point for customizing your subtitles. Depending on your app’s design and user preferences, you can further explore attributes like relative character size, text positioning, alignment, and more to fine-tune the appearance of your subtitles. By doing so, you can create subtitles that seamlessly blend with your app’s overall aesthetics, making it more engaging and inclusive for your audience.

Extracting Supported Subtitle Languages:

Subtitle Selection View

In this section, we’ll discuss how to use an extension on AVPlayer to extract the supported subtitle languages from the media asset. This will help us determine the available options for users to choose from when selecting subtitles.

import AVFoundation

extension AVPlayer {
    var supportedSubtitleOptions: [AVMediaSelectionOption]? {
        guard let playerItem = currentItem, let mediaSelectionGroup = playerItem.asset.mediaSelectionGroup(forMediaCharacteristic: .legible)
        else {
            return nil
        }
        return mediaSelectionGroup.options.filter { $0.extendedLanguageTag != nil }
    }
}

• asset.mediaSelectionGroup: We utilize the media selection group associated with the current player item to access the legible media, which typically includes subtitles. If there are no legible media options available, it returns nil. Additionally, besides legible media, there are also visual and audible media characteristics that cater to various media options for both audio and video content.
• If there are legible media options, we filter them to ensure they have an extendedLanguageTag (a unique identifier for the language). This filtering step removes any unsupported or undefined subtitle tracks.

Handling subtitle track selection:

German Subtitles

private func handleSubtitleSelection(option: AVMediaSelectionOption) {
    guard let mediaSelectionGroup = playerItem?.asset.mediaSelectionGroup(forMediaCharacteristic: .legible) else { return }
    playerItem?.select(option, in: mediaSelectionGroup)
}

This function facilitates the user-driven selection of a subtitle track within the iOS media player. When triggered with a specific subtitleTrack parameter, typically determined by the user’s choice via the user interface, it identifies the relevant media selection group for subtitles and assigns the chosen track to the player item. This mechanism empowers users to customize their subtitle preferences, ensuring that the displayed subtitles align precisely with their selections during video playback.

Link to Github repo — https://github.com/ajkmr7/Custom-Video-Player

I trust that the insights shared in this article will be valuable in elevating your iOS app’s subtitle handling, enriching the user experience, and increasing engagement.

Check out Part 3 of Crafting the Ultimate iOS Video Player — Exploring Video Quality Selection

Stay tuned for future articles in this series exploring advanced AVPlayer features. Happy Coding!!!✌️