画中画 (PiP)

自2017年4月起,Android O的Chrome支持画中画。这功能可让用户在同个时间,在悬浮窗中的<video>元素播放视频,一边做其他的事情。

要如何使用画中画呢?首先开启Chrome, 然后开启一个拥有视频的网页吗,然后将那个视频在全屏中播放。然后按主页按钮以回到Android的主页,你将会发现正在播放着的视频将会自动地进入画中画模式。是不是很酷呢?

Android Picture in Picture photo
图 1.     Android的画中画模式

但是... 要怎样在桌面中使用画中画? 网页要怎样控制画中画呢?

好消息是画中画Web API的规范 已经在草稿阶段中了。这规范能让网页使用这API来控制画中画在网页中的行为,这包括:

  • 通知网页当视频进入或退出画中画。
  • 允许用户使用手势来进入或退出画中画模式。
  • 允许网页退出画中画。
  • 允许网页检查是否可以使用画中画模式。

以下是画中画Web API的示例代码:

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

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

<script>
  // 如果不支持画中画,将按钮隐藏
  pipButton.hidden = !document.pictureInPictureEnabled;

  pipButton.addEventListener('click', function() {
    // 如果没有元素在画中画模式,我们将为那视频 (video)元素
    // 请求进入画中画模式。若是已经是在画中画模式中,
    // 我们将请求退出画中画模式。
    if (!document.pictureInPictureElement) {
      video.requestPictureInPicture()
      .catch(error => {
        // 视频无法进入画中画模式
      });
    } else {
      document.exitPictureInPicture()
      .catch(error => {
        // 视频无法退出画中画模式
      });
    }
  });
</script>

反馈

您觉得这个画中画怎样呢? 欢迎你在Picture In Picture WICG的软件源提供建议及提出问题。我们渴望能听到你的想法!

阻止Android中的画中画的默认行为

今天,你可以使用resize event来阻止在Chrome运行的网页中的视频进入Android默认的画中画模式。您可以通过resize event来检测窗口大小是否有变化(见以下的代码)。直到画中画Web API被正式的实施,使用resize event来阻止Android中的画中画的默认行为的方法只是暂时的,这不是长期的解决方法。

// 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();
  }
});

Translated by