在 Document Picture-in-Picture API 推出之前,我们只能将 HTML <video>
元素放入画中画窗口中。通过这一新 API,可打开一个始终在顶部,其中可填充任意 HTML 内容的窗口。此功能从桌面版 Chrome 111 开始以源试用形式提供。
![正在播放 Sintel 预告片视频的画中画窗口。](https://developer.chrome.google.cn/static/blog/the-future-of-picture-in-picture/image/a-picture-picture-window-457c5c468d28f.png?authuser=5&hl=nb)
新 API 提供的功能远不止适用于 <video>
的现有 Picture-in-Picture API 所提供的功能。例如,您可以提供自定义控件和输入内容(例如字幕、播放列表、时间滑块、顶和踩视频),以提升用户的画中画视频播放器体验。
借助画中画功能的完整文档,视频会议 Web 应用可以将多个视频流合并到一个画中画窗口中,而无需依赖画布技巧。他们还可以提供自定义控件,例如发送消息、将其他用户静音或举手。
以下代码段展示了如何为自定义视频播放器开启画中画功能。
async function togglePictureInPicture() {
// Close Picture-in-Picture window if any.
if (documentPictureInPicture.window) {
documentPictureInPicture.window.close();
return;
}
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow({
initialAspectRatio: 640 / 360,
copyStyleSheets: true,
});
// Move video to the Picture-in-Picture window.
const video = document.querySelector("#video");
pipWindow.document.body.append(video);
// Listen for the PiP closing event to move the video back.
pipWindow.addEventListener("unload", (event) => {
const videoContainer = document.querySelector("#videoContainer");
const pipVideo = event.target.querySelector("#video");
videoContainer.append(pipVideo);
});
}
如需了解详情,请参阅任何元素的画中画功能,而不仅仅是 <video>。
在此阶段,开发者的反馈非常重要,欢迎在 GitHub 上提交问题,并附上相关建议和问题。
主打图片:Jakob Owens。