javascript - 一种制作实时画中画的方法

Question

有件事困扰着我，我在这里大声呼救:

我想制作一个项目，其中有一个视频，如果我激活画中画形式，它会在主页和画中画页面上播放。

Answer 1

除了复制该视频元素别无他法...

您可以通过为克隆提供从原始视频生成的 MediaStream 并将该克隆用作画中画窗口的源来使同步更好一些。

if( 1 && "pictureInPictureElement" in document ) {

const button = document.getElementById( "btn" );
const in_doc = document.getElementById( "in_doc" );
const clone = document.getElementById( "clone" );

in_doc.onloadedmetadata = (evt) => {
  const stream = in_doc.captureStream();
  // we stop the audio coming in the clone
  // otherwise wed have two audio feeds in the output
  // with few µs of delay, creating an horrible echo effect
  stream.getAudioTracks().forEach( track => track.stop() );
  // feed the clone with a MediaStream generated from in-doc video
  // they'll thus display the same images
  clone.srcObject = stream;
};

// our own UI
button.onclick = (evt) => {
  if( document.pictureInPictureElement === clone ) {
    clone.pause();
    document.exitPictureInPicture()
  }
  else {
    clone.play();
    clone.requestPictureInPicture();
  }
};

// handle the default UI
in_doc.addEventListener( 'enterpictureinpicture', (evt) => {
  if( document.pictureInPictureElement === clone ) {
    // already active
    return;
  }
  else {
    // there can be only only one PiP window at a time
    clone.play();
    clone.requestPictureInPicture();
  }
} );

}
else {
  console.error( "Your browser doesn't support the PiP API." );
  console.error( "This demo won't work for you." );
}

#clone {
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}
video {
  height: 100vh;
  vertical-align: top;
}

<button id="btn" >toggle PiP</button>
<video id="in_doc" controls src="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm" crossorigin ></video>
<!-- The following will be hidden and only used to generate the PiP -->
<video id="clone" autoplay ></video>

另请注意，虽然目前 Chrome 的 UI 没有在 PiP 窗口上设置任何控件，但他们可能会在未来添加一些控件，并且其他实现也可以(例如 Firefox 自己的 PiP，它不是 API 的，有一个 play/暂停键)。因此，为了面向 future ，您可能希望将用户触发的所有媒体事件(播放、暂停、搜索等)从克隆链接到可见视频。