一种在画中制作实时图片的方法

Question

有一些事情困扰着我，我在这里大声呼救：

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

Answer 1

除了复制该视频元素之外，没有其他方法...

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

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的PiP，有一个播放/暂停按钮(。 因此，为了面向未来，您可能希望将用户触发的所有媒体事件(播放、暂停、搜索等(从克隆链接到可见视频。