Hình trong hình (PiP)

François Beaufort

Kể từ tháng 4 năm 2017, Chrome cho Android O hỗ trợ chế độ Hình trong hình. Dịch vụ 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 để 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?

Đó là, nhưng còn máy tính để bàn 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à thông số kỹ thuật của API Web Hình trong hình đang được soạn thảo. 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 đây 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à đây là nội dung có thể xuất hiện:

<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ĩ gì về thông tin này? 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();
    }
});