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.
If you’d like to follow along with these samples, you’ll need to first:
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.
window.onbeforeunload
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); }}
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.
init
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; });}
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.
adBreakReadyHandler
adsManager.start()
videoContent.play()
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.
