Tự động chuyển video sang chế độ Hình trong hình trên nhiều trang web hơn

Benjamin Keen
Benjamin Keen
François Beaufort
François Beaufort
GitHub

Ngày xuất bản: 18 tháng 3 năm 2026

Kể từ Chrome 142, các ứng dụng web phát âm thanh hoặc video có thể tự động chuyển sang chế độ Hình trong hình nếu chúng đăng ký một trình xử lý hành động của phiên đa phương tiện. Đây là một điểm bổ sung tuyệt vời cho trình phát nhạc và video, nhưng nhà phát triển phải triển khai tính năng hỗ trợ một cách rõ ràng.

Để mang đến trải nghiệm đa nhiệm liền mạch với nội dung nghe nhìn và cải thiện khả năng được phát hiện của chế độ Hình trong hình (PiP), Chrome giới thiệu chế độ Auto PiP do trình duyệt khởi tạo. Tính năng này cho phép Chrome tự động mở cửa sổ PiP cho video đối với những trang web chưa đăng ký trình xử lý thao tác trong phiên nội dung nghe nhìn. Điều này giúp đảm bảo nội dung nghe nhìn của bạn vẫn xuất hiện khi bạn chuyển đổi giữa các thẻ.

Hướng dẫn

  • Sử dụng Chrome 142 trở lên trên máy tính.
  • Bật chế độ "Browser initiated automatic picture in picture" (Trình duyệt tự động khởi chạy chế độ hình trong hình) trong chrome://flags/#browser-initiated-automatic-picture-in-picture rồi khởi động lại Chrome.
  • Truy cập một trang web video rồi phát một video (ví dụ).
  • Chuyển sang một thẻ Chrome khác để kích hoạt cửa sổ PIP (Hình trong hình) của video.

Cách hoạt động

Khi bạn phát nội dung nghe nhìn và chuyển sang một thẻ khác, Chrome có thể tự động di chuyển nội dung nghe nhìn đó vào một cửa sổ video PiP luôn ở trên cùng. Không giống như "Tính năng tự động chuyển sang chế độ hình trong hình khi phát nội dung nghe nhìn" hiện có (hỗ trợ video hoặc nội dung HTML bất kỳ bằng Document Picture-in-Picture API), các yêu cầu do trình duyệt khởi tạo luôn mở một cửa sổ hình trong hình chuẩn cho video.

Để đảm bảo trải nghiệm người dùng chất lượng cao và không xâm nhập, Chrome chỉ kích hoạt hành vi này khi đáp ứng một bộ điều kiện nghiêm ngặt:

  • URL khung trên cùng an toàn theo dịch vụ Duyệt web an toàn.
  • Nội dung nghe nhìn nằm ở khung trên cùng.
  • Nội dung nghe nhìn có âm thanh trong 2 giây qua.
  • Nội dung nghe nhìn có quyền phát âm thanh và đang phát.
  • Có một người chơi "bình thường", tức là một phần tử đa phương tiện không bị tắt tiếng, đã phát và không sử dụng MediaStream.
  • Phần tử nội dung nghe nhìn phải có một bản video.
  • Trang web không chủ động sử dụng camera hoặc micrô.
  • Người dùng đã vượt quá ngưỡng Chỉ số tương tác với nội dung nghe nhìn, cho thấy họ thường xuyên sử dụng trang web. Điều kiện này áp dụng nếu người dùng chưa cho phép hoặc từ chối tính năng này một cách rõ ràng.
  • Hiện không có cửa sổ PiP nào đang mở. Nếu một cửa sổ PIP (Hình trong hình) khác đã mở, Chrome sẽ không kích hoạt quá trình chuyển đổi tự động.
So sánh chế độ PiP tự động do trình duyệt khởi tạo (trang web không có trình xử lý thao tác enterpictureinpicture) và chế độ PiP tự động để phát nội dung nghe nhìn (trường hợp trang web đã đăng ký trình xử lý).

Quyền kiểm soát và quyền riêng tư của người dùng

Tính năng Auto PiP do trình duyệt khởi tạo tuân thủ các quyền và chế độ cài đặt tương tự của người dùng như các yêu cầu do trang web khởi tạo. Lần đầu tiên một trang web tự động chuyển sang chế độ PIP (Hình trong hình), Chrome sẽ hiển thị cho người dùng một hộp thoại cấp quyền để hỏi xem họ có muốn cho phép trang web này thực hiện hành vi này trong tương lai hay không.

Người dùng cũng có thể quản lý các quyền này bất cứ lúc nào thông qua phần "Chế độ cài đặt trang web".

Quyền kiểm soát và lựa chọn không sử dụng của nhà phát triển

Mặc dù tính năng này được thiết kế để hoạt động ngay khi bạn cài đặt cho hầu hết các trang web video, nhưng bạn có thể chọn không sử dụng tính năng này.

Triển khai trình xử lý của riêng bạn

Nếu ứng dụng web của bạn đã đăng ký một trình xử lý thao tác của phiên nội dung nghe nhìn cho thao tác enterpictureinpicture, thì quá trình triển khai của bạn sẽ được ưu tiên và Chrome sẽ không bắt đầu quá trình chuyển đổi tự động của riêng mình.

Nếu bạn muốn tuỳ chỉnh hành vi khi Chrome cho rằng một hiệu ứng chuyển đổi là phù hợp, trình xử lý thao tác enterpictureinpicture sẽ bao gồm một reason trong MediaSessionActionDetails. Bạn có thể kiểm tra xem reason có phải là contentoccluded hay không (nghĩa là trình duyệt đã bắt đầu yêu cầu vì thẻ bị ẩn) và quyết định cách xử lý.

navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
  if (details.reason === "contentoccluded") {
    // The browser suggests entering Picture-in-Picture.
    // You can choose to open a standard video PiP or a Document PiP window, or do
    // nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
  }
});

Các phương pháp hay nhất cho phiên phát nội dung nghe nhìn

Với chế độ PiP tự động do trình duyệt khởi tạo, cấu hình phiên phát nội dung đa phương tiện sẽ giúp Chrome hiểu và tương tác với nội dung của bạn. MediaSession được định cấu hình đúng cách sẽ đảm bảo cửa sổ PiP mang lại trải nghiệm chất lượng cao với thông tin và các chế độ kiểm soát chính xác cho người dùng.

Đồng bộ hoá thanh tiến trình

Nếu bạn sử dụng API setPositionState và vị trí của phiên phát nội dung nghe nhìn không được cập nhật đúng cách, thì cửa sổ PiP sẽ hiển thị một thanh tiến trình không chính xác trong quá trình phát nội dung nghe nhìn. Để ngăn chặn điều này, hãy luôn cập nhật hoặc huỷ đặt position state bằng cách sử dụng navigator.mediaSession.setPositionState() khi thích hợp (ví dụ: khi nguồn nội dung nghe nhìn thay đổi hoặc được đặt lại), để cửa sổ PiP phản ánh đúng vị trí của nội dung nghe nhìn đang phát.

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);

Xử lý các hiệu ứng chuyển đổi một cách mượt mà

Nếu trang web của bạn tự động phát "Tập tiếp theo", hãy đảm bảo rằng trình xử lý hành động MediaSession và siêu dữ liệu của bạn vẫn hoạt động và chính xác trong suốt quá trình chuyển đổi. Nếu trình xử lý thao tác bị xoá hoặc huỷ đặt trong quá trình chuyển đổi sang phần tử "Tiếp theo", thì cửa sổ PIP (Hình trong hình) có thể mất các chức năng do trình xử lý cung cấp.

Bật chế độ kiểm soát hoàn toàn

Ngoài các thao tác phát và tạm dừng cơ bản, hãy cân nhắc triển khai trình xử lý cho seekto, previoustrack và nexttrack. Điều này cho phép người dùng điều hướng nội dung của bạn ngay trong cửa sổ PIP (Hình trong hình) mà không cần quay lại thẻ ban đầu.

navigator.mediaSession.setActionHandler("seekto", (details) => {
  if (details.fastSeek && "fastSeek" in video) {
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
});

Tương tác và chia sẻ ý kiến phản hồi

Nếu bạn có ý kiến phản hồi hoặc gặp phải vấn đề nào liên quan đến hành vi này, hãy chia sẻ tại crbug.com.

Tài nguyên