The Kaltura Player does not inherently include a UI, but this guide will walk you through an example of how to add play/pause buttons and a scrubber to your player.
At this point you should have a Kaltura Player embedded in your application and showing your entry, as seen in this guide.
We will start by adding button images of your choice to the Assets catalogue of your project. Then, in the storyboard, create a play/pause button, a slider (scrubber), a current position label, and a (remaining) duration label. For the play/pause button, in the Attributes Inspector, click the dropdown for Title and select Attributed. Under Image, type in the name of the play button file (it should have autocomplete for existing files).
Lastly, create the outlets for all your new objects in the Controller:
Currently our play button is only set to show a play icon, and we’ll want it to change for different scenarios. What we’ll need is to handle the state of what’s happening in the player - whether it is idle, playing, paused, or ended. Let’s add an enum called state at the top of the class:
And a Property Observer on that enum which switches on each state.
What this does is listen for a change to the state, and based on whether the player is currently idle, paused, or playing, the picture of the play/pause button is changed accordingly.
At the beginning of the viewDidLoad function, set the state to idle.
self.state = .idle
On the playPauseButton, add a new IBAction for a “Touch Up Inside” event and link it to a new playerTouched function that calls play/pause on the player when the button is touched. Available Basic Player actions can be found here
The slider is made up of a few components: the playhead, the current time stamp, and the duration of the entry. All of this configuration happens in the setupPlayer function. Firstly, a formatter for displaying the number of seconds as HH:MM:SS
Then, we’ll add three observers. The first one checks on the media’s progress in the task queue every fifth of a second and then updates the player slider accordingly, as well as the text of the current position label (using the time formatter)
The second observer waits for Player event durationChanged which happens when the media loads and the duration of the video is known. This happens once per playback. It then sets the maximum value of the slider playhead, and the text of the duration label.
The third observer listens for player events, and updates the State when the player begins playing, is paused, or has ended, which is what the switch case above is dependent on. Player events can be found here
Lastly, in the Storyboard, set a new referencing action on the Playhead Slider for the “Value Changed” event. Call it playheadValueChanged. Add it after the playTouched function. It should set the current time position according to the value of the palyhead, and change the State to paused in the case of moving the slider back after the video has ended.
You should be able to run the code, and use the basic player functions. The complete code should look like this: