Hình trong hình (PiP)

François Beaufort
François Beaufort
GitHub

Kể từ tháng 4 năm 2017, Chrome cho Android O hỗ trợ chế độ Hình trong hình. Tính năng này cho phép người dùng phát một phần tử <video> trong một cửa sổ lớp phủ nhỏ không bị các cửa sổ khác chặn, nhờ đó họ có thể xem trong khi làm việc khác.

Sau đây là cách thực hiện: mở Chrome, truy cập vào một trang web có video rồi phát video ở chế độ toàn màn hình. Từ đó, hãy nhấn nút Màn hình chính để chuyển đến Màn hình chính của Android và video đang phát sẽ tự động chuyển sang chế độ Hình trong hình. Vậy là xong! Thật thú vị phải không?

Ảnh chụp chế độ Hình trong hình trên Android
Hình 1. Ảnh chụp chế độ Hình trong hình trên Android

Có, nhưng còn trên máy tính thì sao? Điều gì sẽ xảy ra nếu trang web muốn kiểm soát trải nghiệm đó?

Tin vui là chúng tôi đang soạn thảo bản đặc tả API web Hình trong hình. Quy cách này nhằm cho phép các trang web khởi tạo và kiểm soát hành vi này bằng cách hiển thị bộ thuộc tính sau cho API:

  • Thông báo cho trang web khi video chuyển sang và thoát khỏi chế độ Hình trong hình.
  • Cho phép trang web kích hoạt chế độ Hình trong hình trên một phần tử video thông qua cử chỉ của người dùng.
  • Cho phép trang web thoát khỏi chế độ Hình trong hình.
  • Cho phép trang web kiểm tra xem có thể kích hoạt chế độ Hình trong hình hay không.

Và mã có thể như sau:

<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>

Phản hồi

Bạn nghĩ sao? Vui lòng gửi ý kiến phản hồi và nêu vấn đề trong Kho lưu trữ WICG Hình trong hình. Chúng tôi rất mong được biết ý kiến của bạn!

Ngăn hành vi PIP mặc định của Android

Hiện tại, bạn có thể ngăn video sử dụng hành vi PiP mặc định của Android trong Chrome bằng cách phản hồi sự kiện đổi kích thước và phát hiện thời điểm kích thước cửa sổ thay đổi đáng kể (xem mã bên dưới). Bạn không nên dùng cách này làm giải pháp lâu dài, nhưng đây là một lựa chọn tạm thời cho đến khi triển khai API Web.

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