画中画 (PIP)

François Beaufort
François Beaufort
GitHub

从 2017 年 4 月开始，Android O 版 Chrome 支持画中画。 借助它，用户可以在不受其他窗口遮挡的小叠加窗口中播放 <video> 元素，这样他们就可以一边观看视频，一边执行其他操作。

其运作方式如下：打开 Chrome，转到包含视频的网站，然后全屏播放。然后，按主屏幕按钮前往 Android 主屏幕，正在播放的视频将自动切换到画中画模式。仅此而已！很酷吧？

Android 画中画照片
图 1. Android 画中画照片

是的，但桌面设备呢？如果网站想要控制该体验，该怎么办？

好消息是，我们正在起草 Picture-in-Picture Web API 规范。本规范旨在通过向 API 公开以下属性集，使网站能够启动和控制此行为：

  • 在视频进入和退出画中画模式时通知网站。
  • 允许网站通过用户手势在视频元素上触发画中画。
  • 允许网站退出画中画模式。
  • 允许网站检查是否可以触发画中画模式。

具体可能如下所示：

<video id="video" src="https://example.com/file.mp4"></video>

<button id="pipButton"></button>

<script>
    // Hide button if Picture-in-Picture is not supported.
    pipButton.hidden = !document.pictureInPictureEnabled;

    pipButton.addEventListener('click', function() {
    // If there is no element in Picture-in-Picture yet, let's request Picture
    // In Picture for the video, otherwise leave it.
    if (!document.pictureInPictureElement) {
        video.requestPictureInPicture()
        .catch(error => {
        // Video failed to enter Picture-in-Picture mode.
        });
    } else {
        document.exitPictureInPicture()
        .catch(error => {
        // Video failed to leave Picture-in-Picture mode.
        });
    }
    });
</script>

反馈

您觉得如何？请在 Picture-in-Picture WICG 代码库中提交反馈并提出问题。我们非常期待收到您的反馈！

防止 Android 的默认 PIP 行为

目前，您可以通过响应大小调整事件并检测窗口大小发生显著变化的时间，阻止视频在 Chrome 中使用 Android 的默认画中画行为（请参阅以下代码）。我们不建议将此作为永久性解决方案，而是在实现 Web API 之前提供临时方案。

// See whether resize is small enough to be PiP. It's a hack, but it'll
// work for now.
window.addEventListener('resize', function() {
    if (!document.fullscreenElement) {
    return;
    }

    var minimumScreenSize = 0.33;
    var screenArea = screen.width * screen.height;
    var windowArea = window.outerHeight * window.outerWidth;

    // If the size of the window relative to the screen is less than a third,
    // let's assume we're in PiP and exit fullscreen to prevent Auto PiP.
    if ((windowArea / screenArea) < minimumScreenSize) {
    document.exitFullscreen();
    }
});