是否可以使用不适用于视频的 PIP 模式？答案

【问题标题】：Is it possible to use PIP mode which is not for videos?是否可以使用不适用于视频的 PIP 模式？
【发布时间】：2020-08-01 16:39:12
【问题描述】：

我想将 div 类显示为 PiP（画中画）。我用谷歌搜索了很多，但只是如何在视频中启用，而不是自定义 div。

在我的环境中，可以使用 js、CSS 和 HTML。我想使用 PiP 的 div 会逐秒更改。

【问题讨论】：

请edit您的问题更详细地说明您想要做什么以及图片与此有何关联。

标签： html picture-in-picture

【解决方案1】：

没有画中画仅适用于

您可以做的是在

const target = document.getElementById('target');
const source = document.createElement('canvas');
const ctx = source.getContext('2d');
ctx.font = "50px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
anim();

const stream = source.captureStream();
target.srcObject = stream;

const btn = document.getElementById('btn');
if( target.requestPictureInPicture ) {
  btn.onclick = e => target.requestPictureInPicture();
}
else {
  btn.disabled = true;
}

function anim() {
  ctx.fillStyle = "white";
  ctx.fillRect( 0, 0, source.width, source.height );
  ctx.fillStyle = "black";
  ctx.fillText( new Date().toTimeString().split(' ')[0], source.width / 2, source.height / 2 );
  requestAnimationFrame( anim );
}

<video id="target" controls muted autoplay></video>
<button id="btn">request PiP</button>

【讨论】：