Với lần ra mắt gần đây về API Hình trong hình tài liệu (và thậm chí cả 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. Tính năng này đặc biệt hữu ích cho các ứng dụng hội nghị truyền hình trên web. Ứng dụng này 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 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 tính năng hội nghị truyền hình này, từ phiên bản 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, kèm theo một số hạn chế để đảm bảo trải nghiệm tích cực cho người dùng. Ứ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:
API này đã đă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 hành động
"enterpictureinpicture".Ứng dụng này đang tích cực chụp ảnh hoặc micrô qua getUserMedia.
Người dùng cho phép chế độ "hình trong hình tự động" thông qua một chế độ cài đặt được bật theo mặc định của trình duyệt.
Khi một ứng dụng web đủ điều kiện, chức năng gọi lại của 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" 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 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 chế độ hiển thị trang hiển thị lại.
Ví dụ sau đây cho bạn thấy cách yêu cầu quyền truy cập vào máy ảnh của người dùng. Sau đó, đăng ký một cách an toàn một trình xử lý hành động trong phiên phát nội dung đa phương tiện cho thao tác "enterpictureinpicture" bằng một hàm callback mở ra một 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.");
}
Dùng thử mẫu Phiên đa phương tiện hội nghị truyền hình.
Chuyển sang chế độ hình trong hình thông qua chế độ điều khiển nội dung nghe nhìn của trình duyệt
Thao tác trong 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 chế độ đ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.
Khi không có phần tử HTML <video> đang phát mà chỉ có âm thanh, việc đăng ký trình xử lý hành động trong phiên phát nội dung đa phương tiện cho "enterpictureinpicture" sẽ cho trình duyệt biết cách xử lý phần tử này và sẽ xử lý việc 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 tài liệu để mở cửa sổ hình trong hình thay vì để trình duyệt xử lý cửa sổ hình trong hình bằng API hình trong hình cho <video>.
Ví dụ sau minh hoạ cách đăng ký an toàn một trình xử lý hành động trong phiên phát nội dung đa phương tiện cho hành động "enterpictureinpicture". Chức năng gọi lại sẽ mở ra một cửa sổ hình trong hình với API Hình trong hình tài liệu khi người dùng chuyển sang chế độ hình trong hình bằng đ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 dùng thử Bản minh hoạ trình phát VideoJS của API tài liệu hoặc mẫu Phiên đa phương tiện video.
Thu hút và chia sẻ ý kiến phản hồi
Nếu có ý kiến phản hồi hoặc gặp bất kỳ vấn đề nào, bạn có thể chia sẻ tại crbug.com.
Tài nguyên
Thư cảm ơn
Nhờ có Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato và Rachel Andrew đã đóng góp bài đánh giá.