如何在 Safari 的自定义 HTML5 视频控件中启用画中画

Question

我正在致力于将画中画 (PiP) 功能集成到自定义 HTML5 视频播放器中。随着 Safari 9 中引入 PiP 支持（在 WWDC15 上宣布），我的目标是增强网站上的用户体验。

挑战如下：虽然 Safari 的默认视频控制器包含画中画按钮，但我需要了解如何使用 JavaScript 以编程方式激活此功能以实现自定义视频控件。

WWDC15期间，有人提到：

“如果您使用自定义 HTML5 视频控件，则可以集成 使用 JavaScript 演示的画中画功能 模式API。”

但是，没有提供实施此操作的具体说明或文档。

我需要什么帮助：

1. 如何在专门针对 Safari 的自定义 HTML5 视频控件中启用画中画？
2. 是否有任何示例或文档可以演示在自定义控件中使用 JavaScript 演示模式 API 集成 PiP？

任何指导或资源将不胜感激！

Answer 1

要使用 JavaScript 在自定义 HTML5 视频播放器中以编程方式激活画中画 (PiP) 功能，您需要使用 JavaScript 演示模式 API。您可以在 W3C 画中画规范中找到有关 PiP 的更多详细信息。

以下是使用自定义控件将画中画集成到 HTML5 视频播放器中的步骤：

1.将画中画按钮添加到您的 HTML 标记中

首先，在 HTML 中包含一个按钮，用户可以单击该按钮来触发画中画模式。

<video id="video" src="my-video.mp4"></video>
<div id="controls">
    <button id="pipButton">PiP</button>
</div>

2.为按钮实现 JavaScript 功能

单击此按钮时，您需要编写 JavaScript 来处理画中画功能。这涉及使用

requestPictureInPicture

方法并处理相关逻辑。

var video = document.getElementById('video');
var pipButton = document.getElementById('pipButton');

// Check if PiP is supported
if (document.pictureInPictureEnabled) {
    pipButton.addEventListener("click", async () => {
        try {
            if (video !== document.pictureInPictureElement) {
                // Request PiP
                await video.requestPictureInPicture();
            } else {
                // Exit PiP
                await document.exitPictureInPicture();
            }
        } catch (error) {
            console.error("PiP Error:", error);
        }
    });
} else {
    pipButton.disabled = true;
}

此代码检查浏览器中是否启用了 PiP，并向 PiP 按钮添加事件侦听器。单击时，它会根据当前状态请求或退出画中画模式。

其他资源

• Safari 9 发行说明 - 画中画：提供特定于 Safari 画中画实现的详细信息。
• 将画中画添加到 Safari 媒体控件：有关将画中画集成到 Safari 媒体控件中的指南，可能会为您的自定义解决方案提供一些见解。