Ngày xuất bản: 5 tháng 2 năm 2025
Kể từ Chrome 120, các ứng dụng web hội nghị video có thể tự động mở cửa sổ hình trong hình khi người dùng chuyển tiêu điểm từ thẻ hiện tại. Tính năng này hữu ích cho những người trình bày muốn xem và tương tác với người tham gia theo thời gian thực trong khi trình bày tài liệu hoặc sử dụng các thẻ hoặc cửa sổ khác. Hãy xem phần Chế độ hình trong hình tự động cho ứng dụng web hội nghị truyền hình để biết thông tin chi tiết.
Kể từ Chrome 134, các ứng dụng web phát âm thanh hoặc video có thể tự động chuyển sang chế độ hình trong hình. Điều này có nghĩa là trình phát nhạc và video trên web hiện có thể chuyển liền mạch sang cửa sổ trình phát thu nhỏ khi người dùng chuyển đổi thẻ, không cần phải kích hoạt theo cách thủ công.
Để hỗ trợ các trường hợp sử dụng phát nội dung nghe nhìn này, từ Chrome 134, các ứng dụng web dành cho máy tính có thể tự động chuyển sang chế độ hình trong hình, với một số hạn chế để đảm bảo trải nghiệm người dùng tích cực. Ứng dụng web chỉ đủ điều kiện sử dụng chế độ hình trong hình tự động để phát nội dung nghe nhìn nếu đáp ứng tất cả các điều kiện sau:
URL của khung trên cùng an toàn theo dịch vụ Duyệt web an toàn.
Nội dung nghe nhìn nằm trong khung trên cùng.
Âm thanh của nội dung nghe nhìn đã phát ra trong vòng 2 giây qua.
Nội dung nghe nhìn có quyền phát âm thanh.
Nội dung nghe nhìn đang phát.
Đã đăng ký trình xử lý hành động trong phiên phát nội dung nghe nhìn cho hành động
"enterpictureinpicture"
.Bạn đã vượt quá ngưỡng Chỉ số tương tác với nội dung nghe nhìn của người dùng, cho biết rằng người dùng thường xuyên sử dụng nội dung nghe nhìn trong ứng dụng web này. Điều này áp dụng nếu chế độ cài đặt trình duyệt của người dùng là "Có thể yêu cầu chuyển sang chế độ hình trong hình". Nếu người dùng cho phép rõ ràng ứng dụng web chuyển sang chế độ hình trong hình, thì điều kiện này sẽ không áp dụng.
![Chế độ cài đặt hình trong hình tự động trong ngăn thông tin trang web của trình duyệt Chrome.](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/browser-setting.jpg?hl=vi)
Lỗi 386193409 theo dõi việc triển khai các điều kiện hiển thị để giúp gỡ lỗi và triển khai dễ dàng hơn.
Xin lưu ý rằng nếu một cửa sổ hình trong hình khác đang mở, thì Chrome sẽ không kích hoạt chế độ hình trong hình tự động. Quy tắc này không áp dụng nếu cửa sổ hình trong hình hiện có được mở tự động và sắp đóng.
Khi một ứng dụng web đáp ứng các yêu cầu, việc chuyển tiêu điểm sang một thẻ khác sẽ kích hoạt hàm gọi lại trình xử lý thao tác trong phiên phát nội dung đa phương tiện cho thao tác "enterpictureinpicture"
. Điều này cho phép ứng dụng web mở cửa sổ hình trong hình mà không cần người dùng thực hiện thao tác. Sau đó, người dùng có thể thấy một hộp thoại cấp quyền, hỏi xem họ có muốn cho phép trang web tự động chuyển sang chế độ hình trong hình mỗi khi truy cập, chỉ lần này hoặc không bao giờ.
![Lớp phủ quyền trong cửa sổ hình trong hình hỏi người dùng xem họ có muốn cho phép trang web tự động chuyển sang chế độ hình trong hình hay không.](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/pip-window-popup.jpg?hl=vi)
Bạn có thể sử dụng API Hình trong hình cho <video> để mở cửa sổ hình trong hình từ phần tử <video>
HTML hoặc API Hình trong hình của tài liệu để mở cửa sổ luôn ở trên cùng nhằm điền nội dung HTML tuỳ ý. Cửa sổ hình trong hình không được lấy tiêu điểm khi mở và tự động đóng khi trang hiển thị trở lại.
Ví dụ sau đây cho bạn biết cách phát phần tử <video>
HTML khi người dùng nhấp vào một nút. Sau đó, hãy đăng ký một trình xử lý thao tác phiên phát nội dung nghe nhìn cho thao tác "enterpictureinpicture"
một cách an toàn bằng một hàm gọi lại mở cửa sổ hình trong hình. Cửa sổ này chứa video có API Hình trong hình cho <video>.
const video = document.querySelector("video");
async function onPlayButtonClick() {
// Play video.
await video.play();
}
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
await video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
Hãy thử VideoJS player demo (bản minh hoạ trình phát VideoJS) giới thiệu Document Picture-in-Picture API hoặc chơi với các mẫu Video Media Session (Phiên nội dung đa phương tiện video) và Audio Media Session (Phiên nội dung đa phương tiện âm thanh).
Tương tác và chia sẻ ý kiến phản hồi
Nếu có ý kiến phản hồi hoặc gặp vấn đề, bạn có thể chia sẻ tại crbug.com.
Tài nguyên
Thư cảm ơn
Cảm ơn Benjamin Keen và Frank Liberato đã xem xét.