Chế độ hình trong hình tự động cho các ứng dụng web

François Beaufort

Nhờ giới thiệu gần đây của API Hình trong hình cho tài liệu (và thậm chí trước đây), 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.

Cửa sổ hình trong hình tự động mở và đóng khi người dùng chuyển đổi thẻ.

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.

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.

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 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 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.");
}

Hãy dùng thử mẫu Phiên nội dung nghe nhìn của 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.

Biểu tượng điều khiển nội dung nghe nhìn trong trình duyệt Chrome, với con trỏ trên chế độ điều khiển hình trong hình của người dùng.

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).

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 vấn đề, bạn có thể chia sẻ tại crbug.com.

Tài nguyên

• Thay đổi về quy cách
• Mục nhập ChromeStatus
• Ý định vận chuyển

Thư cảm ơn

Cảm ơn Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato và Rachel Andrew đã xem xét.