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 có thể mở cửa sổ luôn ở trên cùng có thể được điền sẵn nội dung HTML tuỳ ý. Bản dùng thử này được cung cấp dưới dạng bản dùng thử theo nguyên gốc bắt đầu trong Chrome 111 trên máy tính.

Một cửa sổ Hình trong hình được tạo bằng API Hình trong hình của tài liệu (bản minh hoạ).

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

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

Đoạn mã sau đây hướng dẫn cách bật/tắt tính năng 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 phần 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 thực sự quan trọng ở giai đoạn này, vì vậy, vui lòng gửi vấn đề lên GitHub kèm theo đề xuất và câu hỏi.

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