Skip Ad in Picture-in-Picture window Sample

Available in Chrome 73+ | View on GitHub | Browse Samples

Background

The Media Session API has a skipad action handler web developers can use to show a "Skip Ad" button in the Picture-in-Picture window and be notified when user a interacts with it.

Note: In Chrome 73, it is available for trials so that websites can use it without any experimental flag.

Credits: Media files are © copyright Blender Foundation | www.blender.org.

Live Output













  
    
      
    
  

  
    
JavaScript Snippet

  

  
    
try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
  log('Argh! The "Skip Ad" media session action is not supported.');
}

function showSkipAdButton() {
  log('The Picture-in-Picture window will show a "Skip Ad" button.');
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

// Hide "Skip Ad" button when user clicks it and play another video.
function onSkipAdButtonClick() {
  log('> User clicked "Skip Ad" button.');
  navigator.mediaSession.setActionHandler('skipad', null);

  video.src = "https://storage.googleapis.com/media-session/caminandes/short.mp4";
  video.play();
}

enterPictureInPictureButton.addEventListener('click', async () => {
  await video.play();
  await video.requestPictureInPicture();
});