Tương lai của tính năng Hình trong hình

François Beaufort

Trước API Hình trong hình của tài liệu, bạn chỉ có thể đặt phần tử HTML <video> vào cửa sổ Hình trong hình. API mới này giúp bạn mở một cửa sổ luôn bật (luôn hiển thị) có thể điền sẵn nội dung HTML tuỳ ý. Bạn có thể sử dụng phiên bản này dưới dạng bản dùng thử theo nguyên gốc kể từ Chrome 111 trên máy tính.

API mới này cung cấp nhiều tính năng hơn so với API Hình trong hình hiện có cho <video>. Ví dụ: Bạn có thể cung cấp các chế độ điều khiển và thông tin đầu vào tuỳ chỉnh (ví dụ: phụ đề, danh sách phát, thanh tua nhanh thời gian, thích và không thích video) để cải thiện trải nghiệm của người dùng khi xem video có hình trong hình.

Với Toàn bộ Tài liệu ở chế độ Hình trong hình, các ứng dụng web dùng cho tính năng hội nghị truyền hình có thể kết hợp nhiều luồng video vào một cửa sổ Hình trong hình mà không cần phải dùng tấn công bằng canvas. Họ cũng có thể cung cấp các chức năng điều khiển tuỳ chỉnh như gửi tin nhắn, tắt tiếng người dùng khác hoặc giơ tay phát biểu.

Đoạn mã sau đây cho bạn biết cách bật/tắt Hình trong hình cho trình phát video tuỳ chỉnh.

async function togglePictureInPicture() {
  // Close Picture-in-Picture window if any.
  if (documentPictureInPicture.window) {
    documentPictureInPicture.window.close();
    return;
  }

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow({
    initialAspectRatio: 640 / 360,
    copyStyleSheets: true,
  });

  // Move video to the Picture-in-Picture window.
  const video = document.querySelector("#video");
  pipWindow.document.body.append(video);

  // Listen for the PiP closing event to move the video back.
  pipWindow.addEventListener("unload", (event) => {
    const videoContainer = document.querySelector("#videoContainer");
    const pipVideo = event.target.querySelector("#video");
    videoContainer.append(pipVideo);
  });
}

Hãy xem mục Hình trong hình cho mọi phần tử, chứ không chỉ <video> để biết thêm thông tin.

Ý kiến phản hồi của nhà phát triển rất quan trọng ở giai đoạn này, vì vậy hãy gửi vấn đề trên GitHub kèm theo đề xuất và câu hỏi.

Hình ảnh chính của Jakob Owens.