Kể từ tháng 4 năm 2017, Chrome dành cho Android O hỗ trợ tính năng Hình trong hình.
Tính năng này cho phép người dùng phá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.
Cách hoạt động như sau: mở Chrome, truy cập vào một trang web chứa video và phát video đó ở chế độ toàn màn hình. Tại đó, 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. Chỉ có vậy thôi! Khá thú vị phải không?
Vậy còn máy tính để bàn thì sao? Nếu trang web muốn kiểm soát trải nghiệm đó thì sao?
Tin vui là thông số kỹ thuật API Web Hình trong hình đang được nháp như chúng tôi nói. Thông số kỹ thuật này nhằm cho phép các trang web bắt đầu và kiểm soát hành vi này bằng cách hiển thị nhóm thuộc tính sau đây cho API:
- Thông báo cho trang web khi video chuyển vào và rời khỏi chế độ Hình trong hình.
- Cho phép trang web kích hoạt Hình trong hình trên thành phần video thông qua cử chỉ của người dùng.
- Cho phép trang web thoát Hình trong hình.
- Cho phép trang web kiểm tra xem tính năng Hình trong hình có thể được kích hoạt hay không.
Đoạn mã này có thể có dạng 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>
Ý kiến phản hồi
Vậy 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 chặn hành vi PIP mặc định của Android
Hiện nay, 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 một 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 sử dụng giải pháp này lâu dài mà chỉ cung cấp 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();
}
});