画中画的应用随处可见啊,淘宝的直播界面悬浮窗口,哔哩哔哩视频以及豆瓣视频等都有使用到。
<body>
<video controls autoplay loop muted id="video" src="./video.mp4" poster="./poster.png"></video>
<div>
<button id="enter">进入画中画</button>
<button id="exit">退出画中画</button>
<span id="tips"></span>
</div>
<script>
const video = document.getElementById('video');
const enter = document.getElementById('enter');
const exit = document.getElementById('exit');
const tips = document.getElementById('tips');
// 进入画中画
enter.addEventListener('click', (event) => {
video.requestPictureInPicture().catch(error => {
console.log(error);
});
});
// 退出画中画
exit.addEventListener('click', (event) => {
document.exitPictureInPicture().catch(error => {
console.log(error);
});
});
</script>
</body>