HTML5 Video & Picture in Picture All In One

HTML5 Video & Picture in Picture All In One

https://caniuse.com/#search=picture in picture

https://w3c.github.io/picture-in-picture/

PiP

https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture

https://www.chromestatus.com/feature/5729206566649856

https://github.com/arnellebalane/picture-in-picture-video

https://css-tricks.com/an-introduction-to-the-picture-in-picture-web-api/

https://dev.to/ananyaneogi/implement-picture-in-picture-on-the-web-17g8

https://github.com/w3c/picture-in-picture

demos

https://googlechrome.github.io/samples/picture-in-picture/

let pipWindow;

togglePipButton.addEventListener('click', async function(event) {
  log('Toggling Picture-in-Picture...');
  togglePipButton.disabled = true;
  try {

    if (video !== document.pictureInPictureElement)
      await video.requestPictureInPicture();
    else
      await document.exitPictureInPicture();

  } catch(error) {
    log(`> Argh! ${error}`);
  } finally {
    togglePipButton.disabled = false;
  }
});

// Note that this can happen if user clicked the "Toggle Picture-in-Picture"
// button but also if user clicked some browser context menu or if
// Picture-in-Picture was triggered automatically for instance.
video.addEventListener('enterpictureinpicture', function(event) {
  log('> Video entered Picture-in-Picture');

  pipWindow = event.pictureInPictureWindow;
  log(`> Window size is ${pipWindow.width}x${pipWindow.height}`);

  pipWindow.addEventListener('resize', onPipWindowResize);
});

video.addEventListener('leavepictureinpicture', function(event) {
  log('> Video left Picture-in-Picture');

  pipWindow.removeEventListener('resize', onPipWindowResize);
});

function onPipWindowResize(event) {
  log(`> Window size changed to ${pipWindow.width}x${pipWindow.height}`);
}

/* Feature support */

if ('pictureInPictureEnabled' in document) {
  // Set button ability depending on whether Picture-in-Picture can be used.
  setPipButton();
  video.addEventListener('loadedmetadata', setPipButton);
  video.addEventListener('emptied', setPipButton);
} else {
  // Hide button if Picture-in-Picture is not supported.
  togglePipButton.hidden = true;
}

function setPipButton() {
  togglePipButton.disabled = (video.readyState === 0) ||
                             !document.pictureInPictureEnabled ||
                             video.disablePictureInPicture;
}

https://www.blender.org/

https://bitmovin.com/demos/picture-in-picture

https://github.com/bitmovin

使用 disablePictureInPicture 禁用画中画

disabled picture in picture

<div class="video-wapper">
  <h2>有 controls & 不使用 controlslist & 使用 disablePictureInPicture ✅</h2>
  <p>
    <mark>使用 disablePictureInPicture 禁用画中画 / disabled picture in picture</mark>
  </p>
  <video
     controls
     disablePictureInPicture
     src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
  </video>
</div>

有 controls & 不使用 controlslist & 使用 disablePictureInPicture ✅

使用 disablePictureInPicture 禁用画中画 / disabled picture in picture

https://codepen.io/xgqfrms/pen/ZErVyov

refs

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---