是否可以使用不适用于视频的 PIP 模式? [英] Is it possible to use PIP mode which is not for videos?
本文介绍了是否可以使用不适用于视频的 PIP 模式?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想将 div 类显示为 PiP(画中画).我用谷歌搜索了很多,但只知道如何在视频中启用,而不是自定义 div.
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.
在我的环境中,js、CSS和HTML都可以使用.我想使用 PiP 的 div 逐秒变化.
At my environment, js, CSS and HTML can be used. A div that I want to use PiP changes second by second.
推荐答案
不,画中画仅适用于
Nope PiP is available for <video> only.
您可以做的是在
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>
这篇关于是否可以使用不适用于视频的 PIP 模式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文