如何以编程方式在 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 以编程方式激活画中画 (PiP) 功能，您需要使用 JavaScript 演示模式 API。有关PiP的更多详细信息，您可以参考W3C画中画规范。

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

1.在您的标记中添加画中画按钮

您需要将一个按钮元素添加到 HTML 标记中，用于触发画中画模式。

html:

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

2.为按钮添加功能

当用户单击按钮时，使用 JavaScript 切换画中画模式。这涉及利用演示模式 API 中的

webkitSetPresentationMode

属性。

javascript:

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

// Check for browser support and API functionality
if (document.pictureInPictureEnabled) {
    // Toggle PiP on button click
    PiP.addEventListener("click", async function(event) {
        if (video !== document.pictureInPictureElement) {
            try {
                await video.requestPictureInPicture();
            } catch (error) {
                console.error("Failed to enter PiP mode:", error);
            }
        } else {
            try {
                await document.exitPictureInPicture();
            } catch (error) {
                console.error("Failed to exit PiP mode:", error);
            }
        }
    });
} else {
    PiP.disabled = true;
}

其他资源

• Safari 9 发行说明 - 画中画
• 将画中画添加到 Safari 媒体控件