Displaying Close Caption controls with vimeo/PlayerKit

406 Views Asked by At

Playing Vimeo videos on the web displays close captioning controls like this.

enter image description here

How do I display similar controls on iOS with the Vimeo/PlayerKit?

I've looked high and low but found no documentation on the player kit at all.

1

There are 1 best solutions below

5
SafeFastExpressive On

Since no one else has jumped up with an answer, this is what I've done. Documentation for text tracks in Vimeo/PlayerKit is found in the files Player.swift and RegularPlayer.swift.

From that I constructed a UIButton subclass, CloseCaptionButton, that I display on the video as it plays and allows users to switch tracks.

// A UIAlertAction subclass to pass language code to selected action.
class TaggedAlertAction: UIAlertAction {
    var languageCode: String?

    public convenience init(title: String?, languageCode: String?,  style: UIAlertAction.Style, handler: ((UIAlertAction) -> Void)? = nil) {
        self.init(title: title, style: style, handler: handler)
        self.languageCode = languageCode
    }
}

class CloseCaptionButton: UIButton {
    var languages: [PlayerKit.TextTrackMetadata]?

    func handleTapFrom(vc: UIViewController, videoPlayer: RegularPlayer) {
        guard let languages = languages else { return print("NIL LANGUAGES, Couldn't open language picker") }
        let alert = UIAlertController(title: "Pick Captions Language", message: nil, preferredStyle: .actionSheet)

        // Create an action item in alert for each language.
        languages.forEach({ (textTrack) in
        let languageCode = textTrack.language
        let name = textTrack.title
            alert.addAction(TaggedAlertAction(title: name, languageCode: languageCode, style: .default) { action in
                let identifier = (action as! TaggedAlertAction).languageCode
                self.selectTrackFor(identifier, videoPlayer: videoPlayer)

            })
        })

        // Last action item allows user to turn off captions (or cancel).
        alert.addAction(UIAlertAction(title: "Turn Off Captions", style: .default) { _ in
            videoPlayer.select(nil)
        })
        alert.popoverPresentationController?.sourceView = vc.view
        vc.present(alert, animated: true)
    }

    func selectTrackFor(_ languageCode: String?, videoPlayer: RegularPlayer) {
        guard let languageCode = languageCode else { return print("NIL IDENTIFIER") }
        let matches = videoPlayer.availableTextTracks.filter({ (track) -> Bool in
            return track.language == languageCode
        })
        guard let match = matches.first else {
            return print("No match for language: \(languageCode)")
        }
        videoPlayer.select(match)
    }

    // Configure with player.availableTextTracks
    func configure(_ tracks: [PlayerKit.TextTrackMetadata]) {
        languages = Languages(trackMetadata: tracks)
    }
}

// How to use
closeCaptionButton.configure(videoPlayer.availableTextTracks)

@IBAction func ccButtonTapped(_ sender: Any) {
    closeCaptionButton.handleTapFrom(vc: self, videoPlayer: videoPlayer)
}

Please enjoy!