みかづきブログ・カスタム

基本的にはちょちょいのほいです。

トップ > JavaScript > Picture-in-Picture APIを使ってVideoを再生する 📼

Picture-in-Picture APIを使ってVideoを再生する 📼

JavaScript

developer.mozilla.org

Picture-in-Picture APIを使って、Video要素をピクチャーインピクチャで再生してみました。
iOS Safari（18.2）、Android Chrome（131.0.6778.135）でも動作を確認済みです。

ソースコード

<html>
  <head>
    <style>
      video {
        display: block;
        width: 640px;
      }

      button {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <video src="movie.mp4" autoplay muted loop></video>
    <button>PictureInPicture</button>
    <script>
      document.querySelector('button').addEventListener('click', () => {
        if (!document.pictureInPictureElement) {
          document.querySelector('video').requestPictureInPicture();
        } else if (document.pictureInPictureEnabled) {
          document.exitPictureInPicture();
        }
      })
    </script>
  </body>
</html>

DEMO

https://jsfiddle.net/kimizuka/qebu4og6/4/

JSFiddleに動画をアップロードできなかったため、getUserMediaを使って、ウェブカメラの映像をビデオにプレビューしています。