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.
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.
Presenting the YouTubePlayerCell –
Here we are presenting the cell in chat screen using
cellForItemAt method of UICollectionView.
Setting size for cell –
sizeForItemAt method of UICollectionView to set the size.
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
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
The methods above present the youtube player with giving Video ID. We are using
YouTubePlayerDelegate method to autoplay the video.
The player can be dismissed by tapping on the light black background.
Final Output –