Today we’re expanding on our earlier blog post, Manual ad break playback in the IMA SDKs. One of the major benefits mentioned in that blog post is the ability to let your users skip ads they’ve already seen when they resume a video stream they previously suspended. We’re going to show you how to implement that functionality. For the purposes of this demo, we’ll be using the HTML5 SDK, but the principles outlined here can be used to achieve the same functionality in all four of our SDK flavors.
Prerequisites
If you’d like to follow along with these samples, you’ll need to first:
- Get a copy of our simple sample for HTML5.
- Modify that sample to disable automatic playback of ad breaks, as outlined in this guide. Be sure to remove the original call to adsManager.start() in onAdsManagerLoaded!
- Change the ad tag to a playlist with multiple mid-rolls (like this one) so you can see the behavior in action.
Step 1: Saving the user’s progress
The first step towards our ultimate goal is to save the current time of the video when the user leaves the page. For simplicity’s sake, we’re going to be using HTML5’s built-in localStorage object. We’re going to override window.onbeforeunload to grab the current time of the video element when the user leaves the page and save it in local storage.
function init() {
videoContent = document.getElementById('contentElement');
playButton = document.getElementById('playButton');
playButton.addEventListener('click', requestAds);
window.onbeforeunload = onUserExit;
}
function onUserExit() {
if (videoContent) {
localStorage.setItem('watched_time', videoContent.currentTime);
}
}
Step 2: Restoring the user’s progress
Now that we’re saving the user’s progress, we’ll want to restore the video to that point when the user returns to the page. We’re going to add some code to the init method to grab the stored current time (if it exists) and seek to that time when our video loads.
function init() {
videoContent = document.getElementById('contentElement');
playButton = document.getElementById('playButton');
playButton.addEventListener('click', requestAds);
window.onbeforeunload = onUserExit;
watchedTime = localStorage.getItem('watched_time') || 0;
videoContent.addEventListener('loadedmetadata', function() {
videoContent.currentTime = watchedTime;
});
}
Step 3: Skipping previously viewed ads
Now that we’re keeping track of the user’s progress and restoring that progress when the user returns, we can skip and ad breaks they watched in a previous visit. To do that, we’ll modify our adBreakReadyHandler to call adsManager.start() only when the loaded ad break is set to play after the user’s most recent saved progress. To ensure the video starts after the skipped ad breaks, we’ll also add a call to videoContent.play() when we decide to skip an ad break.
function adBreakReadyHandler(event) {
if (event.getAdData().adBreakTime >= watchedTime ||
event.getAdData().adBreakTime == -1) { // -1 ensures we play post-rolls
adsManager.start();
} else {
videoContent.play();
}
}
That’s all there is to it! Try starting your video and watching the first mid-roll break. When you leave the page and come back, clicking the play button will result in the video playing from where you left off. The first ad break you’ll see is the second mid-roll break.
As always, if you have any questions feel free to contact us via the support forum.
- Shawn Busolits, IMA SDK Team
- Vincent Tsao, DFP API Team
