Với sự ra mắt gần đây của API Hình trong hình cho tài liệu (và thậm chí trước đó), các nhà phát triển web ngày càng quan tâm đến việc 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. Điều này đặc biệt hữu ích đối với các ứng dụng web hội nghị truyền hình, cho phép người trình bày 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.
Tự động chuyển sang chế độ hình trong hình
Để hỗ trợ các trường hợp sử dụng hội nghị truyền hình này, từ Chrome 120, 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 vài 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 nếu đáp ứng tất cả các điều kiện sau:
Trình xử lý này đã đă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".Ứng dụng đang chủ động ghi lại camera hoặc micrô thông qua getUserMedia.
Người dùng cho phép "chế độ hình trong hình tự động" thông qua chế độ cài đặt trình duyệt được bật theo mặc định.
Khi một ứng dụng web đủ điều kiện, hàm gọi lại trình xử lý hành động của phiên phát nội dung đa phương tiện cho hành động "enterpictureinpicture" sẽ được kích hoạt khi người dùng chuyển tiêu điểm sang một thẻ khác, cho phép ứng dụng mở cửa sổ hình trong hình mà không cần cử chỉ của người dùng.
Nhà phát triển web 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 sẵ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 yêu cầu quyền truy cập vào máy ảnh của người dùng. 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 luồng video của máy ảnh của người dùng bằng API Hình trong hình cho <video>.
const video = document.querySelector("video");
// Request access to the user's camera.
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
video.srcObject = stream;
});
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", () => {
video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
Thử mẫu Phiên truyền thông hội nghị truyền hình.
Chuyển sang chế độ hình trong hình từ trình điều khiển nội dung nghe nhìn của trình duyệt
Thao tác phiên phát nội dung đa phương tiện "enterpictureinpicture" cũng hữu ích khi người dùng muốn chuyển sang chế độ hình trong hình bằng cách sử dụng nút điều khiển nội dung đa phương tiện trong giao diện người dùng của trình duyệt Chrome.
Khi không có phần tử HTML <video> nào phát mà chỉ có âm thanh, việc đăng ký trình xử lý hành động của phiên phát nội dung đa phương tiện cho "enterpictureinpicture" sẽ cho trình duyệt biết rằng ứng dụng web biết cách xử lý và sẽ tự mở cửa sổ hình trong hình.
Điều này cũng hữu ích khi ứng dụng web muốn sử dụng API Hình trong hình của tài liệu để mở cửa sổ hình trong hình thay vì để trình duyệt xử lý bằng API Hình trong hình cho <video>.
Ví dụ sau đây minh hoạ cách đăng ký một 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" một cách an toàn. Hàm gọi lại sẽ mở một cửa sổ hình trong hình bằng API Hình trong hình của tài liệu khi người dùng chuyển sang chế độ hình trong hình bằng nút điều khiển nội dung nghe nhìn trong giao diện người dùng của trình duyệt Chrome.
try {
// Use the Document Picture-in-Picture API when entering
// picture-in-picture from browser media control.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
const pipWindow = await documentPictureInPicture.requestWindow();
// Populate HTML content and handle closing window...
});
} 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) hoặc Video Media Session sample (Mẫu Video Media Session).
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 Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato và Rachel Andrew đã xem xét.