Is it possible to use PIP mode which is not for videos?

问题

I want to show a div class as PiP(Picture in Picture). I have googled a lot, but only how to enable in videos, not a custom div.

At my environment, js, CSS and HTML can be used. A div that I want to use PiP changes second by second.

回答1:

Nope PiP is available for <video> only.

What you could do though is to stream a <canvas> in a <video> and use PiP there.
You can now draw whatever you want in this <canvas>, and even reproduce HTML content.

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>

来源：https://stackoverflow.com/questions/61301087/is-it-possible-to-use-pip-mode-which-is-not-for-videos