Skip Ad in Picture-in-Picture window Sample

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


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 |

Live Output

JavaScript Snippet

try {
  navigator.mediaSession.setActionHandler('skipad', null);
} 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 = "";;

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