检查画中画是否已存在于Javascript中？

Question

我正在创建一个图片元素，它会在 javascript 文件加载后立即触发。
最初我会使用网络摄像头流作为视频源，但在某个事件发生变化时，我想将视频源更改为画布元素。
有没有办法检查图片元素中的图片是否已经在浏览器中打开？

Answer 1

如果 PIP 可用， document.pictureInPictureElement将是视频元素，否则它将为null

https://developers.google.com/web/updates/2017/09/picture-in-picture

 // Hide button if Picture-in-Picture is not supported. pipButton.hidden = !document.pictureInPictureEnabled; pipButton.addEventListener('click', function() { // If there is no element in Picture-in-Picture yet, let's request Picture // In Picture for the video, otherwise leave it. if (!document.pictureInPictureElement) { video.requestPictureInPicture() .catch(error => { // Video failed to enter Picture-in-Picture mode. }); } else { document.exitPictureInPicture() .catch(error => { // Video failed to leave Picture-in-Picture mode. }); } console.clear() console.log(!document.pictureInPictureElement) });

 <button id="pipButton">Toggle PiP</button><br/> <video id="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="50%"></video>