In video_player.js
, define a video player wrapper class to initiate and
control the dash.js player.
Set up the broadband player
Define where in your app to place the broadband player by creating video and wrapper tags:
Create the video player
Initialize the video player class with variables for HTML elements, the dash.js player, and callbacks that other class methods can use.
Define the playback control functions
To show the ad player and attach the video view, create the VideoPlayer.play()
method. Afterwards, create the create VideoPlayer.stop()
method to handle
clean-up after ad pods finish.
Preload the ad stream manifest
To verify ads are sufficiently loaded during the content stream and before the
ad break begins, use VideoPlayer.preload()
and VideoPlayer.isPreloaded()
.
1. Preload the ad stream
Create the VideoPlayer.preload()
method to preload the ad stream manifest and
build up an ad buffer prior to an ad break. You must update the player streaming
settings 'cacheInitSegments'
to true
. By updating the settings, you enable
caching the init segments, which avoids delays when switching to ads.
2. Check the preloaded ad buffer
Create the VideoPlayer.isPreloaded()
method to check if enough ad buffer has
preloaded compared to a buffer threshold set in the app:
Attach player listeners
To add event listeners for the dash.js player event, create the
VideoPlayer.attachPlayerListener()
method: PLAYBACK_PLAYING
,
PLAYBACK_ENDED
, LOG
, and ERROR
. This method also handles events for the
scheme ID URI, in addition to setting the clean-up function to remove these
listeners.
Set player event callbacks
To manage the ad pod playback based on player events, create the
VideoPlayer.onAdPodPlaying()
, VideoPlayer.onAdPodEnded()
, and
VideoPlayer.onAdPodError()
methods:
Create the setter for the onAdPodEnded
event
Set a callback function that runs when an ad pod ends by creating the
VideoPlayer.setOnAdPodEnded()
method. The app class uses this method to resume
the content broadcast after ad breaks.
Handle stream metadata events
Set a callback function that runs based on emsg events by creating the
VideoPlayer.setEmsgEventHandler()
method. For this guide, include the scope
parameter, as you evoke setEmsgEventHandler()
outside of video_player.js
.
Show and hide the video player for ad breaks
To display the video player during ad breaks, and hide the player after the ad
break finishes, create the VideoPlayer.show()
and VideoPlayer.hide()
methods:
Next, create an ads manager class to use the IMA SDK to make a stream request, get an ad pod manifest, listen to IMA stream events, and pass emsg events to the IMA SDK.