Adding Support for Playing Youtube Videos in SUSI iOS App
SUSI supports very exciting features in chat screen, from simple answer type to complex map, RSS, table etc type responses. Even user can ask SUSI for the image of anything and SUSI response with the image in the chat screen. What if we can play the youtube video from SUSI, we ask SUSI for playing videos and it can play youtube videos, isn’t it be exciting? Yes, SUSI can play youtube videos too. All the SUSI clients (iOS, Android, and Web) support playing youtube videos in chat.
Google provides a Youtube iFrame Player API that can be used to play videos inside the app only instead of passing an intent and playing the videos in the youtube app. iFrame API provide support for playing youtube videos in iOS applications.
In this post, we will see how playing youtube video features implemented in SUSI iOS.
Getting response from server side –
When we ask SUSI for playing any video, in response, we get youtube Video ID
in video_play
action type. SUSI iOS make use of Video ID to play youtube video. In response below, you can see that we are getting answer
action type and in the expression of answer
action type, we get the title of the video.
actions: [ { type: "answer", expression: "Playing Kygo - Firestone (Official Video) ft. Conrad Sewell" }, { identifier: "9Sc-ir2UwGU", identifier_type: "youtube", type: "video_play" } ]
Integrating youtube player in the app –
We have a VideoPlayerView
that handle all the iFrame API methods and player events with help of YTPlayer
HTML file.
When SUSI respond with video_play action, the first step is to register the YouTubePlayerCell
and present the cell in collectionView of chat screen.
Registering the Cell –
register(_:forCellWithReuseIdentifier:)
method registers a class for use in creating new collection view cells.
collectionView?.register(YouTubePlayerCell.self, forCellWithReuseIdentifier: ControllerConstants.youtubePlayerCell)
Presenting the YouTubePlayerCell –
Here we are presenting the cell in chat screen using cellForItemAt
method of UICollectionView.
if message.actionType == ActionType.video_play.rawValue { if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ControllerConstants.youtubePlayerCell, for: indexPath) as? YouTubePlayerCell { cell.message = message cell.delegate = self return cell } }
Setting size for cell –
Using sizeForItemAt
method of UICollectionView to set the size.
if message.actionType == ActionType.video_play.rawValue { return CGSize(width: view.frame.width, height: 158) }
In YouTubePlayerCell
, we are displaying the thumbnail of youtube video using UIImageView
. Following method is using to get the thumbnail of particular video by using Video ID –
- Getting thumbnail image from URL
- Setting image to imageView
func downloadThumbnail() { if let videoID = message?.videoData?.identifier { let thumbnailURLString = "https://img.youtube.com/vi/\(videoID)/default.jpg" let thumbnailURL = URL(string: thumbnailURLString) thumbnailView.kf.setImage(with: thumbnailURL, placeholder: ControllerConstants.Images.placeholder, options: nil, progressBlock: nil, completionHandler: nil) } }
We are adding a play button in the center of thumbnail view so that when the user clicks play button, we can present player.
On clicking the Play button, we are presenting the PlayerViewController
, which hold all the player setups, by overFullScreen
type of modalPresentationStyle
.
@objc func playVideo() {
if let videoID = message?.videoData?.identifier {
let playerVC = PlayerViewController(videoID: videoID)
playerVC.modalPresentationStyle = .overFullScreen
delegate?.loadNewScreen(controller: playerVC)
}
}
The methods above present the youtube player with giving Video ID. We are using YouTubePlayerDelegate
method to autoplay the video.
func playerReady(_ videoPlayer: YouTubePlayerView) {
videoPlayer.play()
}
The player can be dismissed by tapping on the light black background.
Final Output –
Resources –
You must be logged in to post a comment.