了解体验画中画视频
veeterzy在Unsplash上拍摄的照片
你将学到的内容
什么是画中画？
检查是否支持画中画？
实施画中画视频体验
画中画事件
获取画中画播放器的宽度和高度。
小型项目。
画中画
Picture-in-Picture (PiP) 允许用户在浮动窗口（始终在其他窗口的顶部）中观看视频，以便他们在与其他网站或应用程序进行交互时可以继续正在观看的内容。
换句话说，即使我们切换了正在播放视频的标签，你仍能看到视频元素，你可以将其拖动到屏幕上的任何位置。
检查是否支持画中画？
我们可以使用 document.pictureInPictureEnabled 布尔值来确定是否 PiP 已经启用。
let isPiPSupported = 'pictureInPictureEnabled' in document,
isPiPEnabled = document.pictureInPictureEnabled;
if (!isPiPSupported) {
console.log('The Picture-in-Picture Web API is not available.');
}
else if (!isPiPEnabled) {
console.log('The Picture-in-Picture Web API is disabled.');
} else {
console.log("PiP supported");
}
画中画视频体验
考虑到我们有视频元素和一个按键，当用户单击按键时，我们需要启用浮动视频。
<video id="videoElement" controls="true" src="video_url"> </video>
<button id="PiP"> Enable Floating Video </button>
要启用 PiP ，我们需要在视频元素上调用 requestPictureInPicture() ，该元素将返回一个 pr o mise 。
一旦 promise 得到解决，视频元素将移动到右下角，我们可以将它移动到任何位置。
我们可以使用 document.pictureInPictureElement 来检查是否已有 PiP 视频正在播放，以及 video 元素是否处于 PiP 模式播放。
<html>
<head>
<title>Picture-in-Picture</title>
</head>
<body>
<video id="videoElement" controls="true" src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"> </video>
<button id="PiP"> Enable Floating Video </button>
<script>
let video = document.getElementById('videoElement');
let toggleBtn = document.getElementById('PiP');
toggleBtn.addEventListener('click', togglePiPMode);
async function togglePiPMode(event) {
toggleBtn.disabled = true; //disable btn ,so that no multiple request are made
try {
if (video !== document.pictureInPictureElement) {
await video.requestPictureInPicture();
toggleBtn.textContent = "Exit Pip Mode";
}
// If already playing exit mide
else {
await document.exitPictureInPicture();
toggleBtn.textContent = "Enable Pip Mode";
}
} catch (error) {
console.log(error);
} finally {
toggleBtn.disabled = false; //enable toggle at last
}
}
</script>
</body>
</html>
上面的代码将创建一个基本的 PiP 视频播放器。
画中画事件
有关 PiP 视频状态的事件有两个
enterpictureinpicture → PiP 启用模式后触发。
画中画
PiP 模式退出后触发，这可能是由于
- 视频在画中画里。
- 用户可能从其他页面播放了画中画视频。
video.addEventListener('enterpictureinpicture', (event)=> {
toggleBtn.textContent = "Exit Pip Mode";
});
video.addEventListener('leavepictureinpicture', (event) => {
toggleBtn.textContent = " Enter PiP Mode";
});
获取画中画播放器的宽度和高度
一旦用户进入 PiP 模式，我们就可以得到 PiP 付款播放器的宽度和高度。
宽度和高度存储在 enterpictureinpicture 事件对象的 pictureInPictureWindow 属性中。
var pipWindow;
video.addEventListener('enterpictureinpicture', function(event) {
pipWindow = event.pictureInPictureWindow;
console.log(`> Window size is ${pipWindow.width}x${pipWindow.height}`);
pipWindow.addEventListener('resize', onPipWindowResize);
});
video.addEventListener('leavepictureinpicture', function(event) {
pipWindow.removeEventListener('resize', onPipWindowResize);
});
function onPipWindowResize(event) {
console.log(`> Window size changed to ${pipWindow.width}x${pipWindow.height}`);
// Change video quality based on Picture-in-Picture window size.
}
小型项目。
让我们用 PiP 做一些有趣的东西
1️⃣ 在画中画窗口中显示用户的网络摄像头
这里，我们将使用 navigator object属性中 mediaDevicesnavigator 的 getUserMedia 方法访问用户网络摄像头。
const video = document.createElement('video');
video.muted = true;
video.srcObject = await navigator.mediaDevices.getUserMedia({ video: true });
video.play()
video.requestPictureInPicture();
2️⃣在画中画窗口中展示用户的显示屏
在这里，我们将使用 navigator object属性中 mediaDevices 的 getDisplay 方法访问用户的显示屏。
const video = document.createElement('video');
video.muted = true;
video.srcObject = await navigator.mediaDevices.getDisplayMedia({ video: true });
video.play();
video.requestPictureInPicture();
请在这里支持作者，这对我来说意义非凡。
如发现任何错误，欢迎评论。
关注JavascriptJeep
获得更有趣的教程
原文作者 Javascript Jeep
原文链接 https://medium.com/javascript-in-plain-english/implementing-floating-video-player-picture-in-picture-in-javascript-f4b7c540723b