子母畫面 (PiP)

François Beaufort
François Beaufort
GitHub

自 2017 年 4 月起，Chrome for Android O 支援子母畫面。 這可讓使用者在程式碼以外的小型重疊視窗中播放 <video> 元素 並被其他視窗封鎖，因此他們能在做其他事時繼續觀看影片。

使用方式：開啟 Chrome、前往含有影片的網站 以全螢幕模式播放。按下「主畫面」按鈕即可前往 Android 手機 主畫面和播放中的影片會自動轉換為 子母畫面。就這樣！很酷吧？

Android 子母畫面相片
圖 1. Android 子母畫面相片
，瞭解如何調查及移除這項存取權。

答案是，那電腦呢？如果網站想控管 該怎麼辦？

好消息是，我們正在擬定子母畫面 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>

意見回饋

你覺得呢？請提交意見回饋，並在 子母畫面 WICG 存放區。我們迫不及待想聽聽 您的想法！

防範 Android 的預設子母畫面行為

你現在可以在以下位置禁止影片使用 Android 的預設子母畫面行為： Chrome 會回應大小調整事件，並偵測視窗大小 大幅變更 (請見下方程式碼)。不建議採用永久方法 但會提供暫時性的選項，直到您實作 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();
    }
});