Trang này được dịch bởi Cloud Translation API.

Khám phá các trường hợp sử dụng thú vị với API Hình trong hình của tài liệu

Jad Joubran

Ngày phát hành: 4 tháng 3 năm 2025

Document Picture-in-Picture API (Document PiP API) cho phép các ứng dụng web mở một cửa sổ nổi, luôn ở trên cùng (cửa sổ hình trong hình) có thể hiển thị bất kỳ nội dung HTML tuỳ ý nào.

API này được xây dựng dựa trên API Hình trong hình cho <video>, cho phép bạn tiếp tục xem video trong cửa sổ PiP.

Vì Document PiP API có thể hiển thị bất kỳ nội dung HTML tuỳ ý nào, nên bạn có thể sử dụng API này để mở khoá các trường hợp sử dụng mới và thú vị.

Hỗ trợ trình duyệt và cải tiến dần

Browser Support

Source

Tại thời điểm viết bài, API Hình trong hình của tài liệu có phạm vi cung cấp bị hạn chế.

Tuy nhiên, điều này không ngăn bạn sử dụng tính năng này với tính năng nâng cao dần hoặc giảm thiểu sự cố.

Khi lập kế hoạch cho trường hợp sử dụng, hãy đảm bảo bạn coi trường hợp sử dụng đó là một tính năng nâng cao dần chứ không phải là một tính năng tiêu chuẩn. Trong bài viết này, bạn sẽ thấy một ví dụ về việc giảm cấp một cách linh hoạt.

Cải thiện trải nghiệm người dùng của người học bằng Document PiP API

LearnHTMLCSS.online là một nền tảng học tập tương tác, dạy HTML và CSS có ngữ nghĩa và dễ tiếp cận. Công cụ này cung cấp một trình chỉnh sửa văn bản tương tác và cửa sổ xem trước trình duyệt.

Bản ghi màn hình sau đây cho thấy bố cục của ứng dụng; màn hình được chia thành hai cột. Cột đầu tiên chứa trình soạn thảo mã. Cột thứ hai chứa bố cục theo thẻ. Theo mặc định, người dùng có thể xem hướng dẫn của thử thách và có thể nhấp vào thẻ Browser (Trình duyệt) để xem bản xem trước trực tiếp.

Đôi khi, với tư cách là học viên, bạn có thể muốn mở rộng tối đa cửa sổ xem trước trong trình duyệt. Đây là cơ hội hoàn hảo để thêm tính năng hỗ trợ cho API Hình trong hình của tài liệu.

Để triển khai tính năng này, hãy bắt đầu bằng cách kiểm tra xem trình duyệt có hỗ trợ hay không:

const isPipSupported = "documentPictureInPicture" in window;

Giờ đây, bạn có thể sử dụng biến này để gói bất kỳ lệnh gọi documentPictureInPicture nào hoặc để trả về sớm từ một hàm dựa vào tính năng Chế độ xem nổi tài liệu. Mã sau đây sẽ kiểm tra khả năng hỗ trợ tính năng Chế độ hình thu nhỏ trong tài liệu, sau đó mở cửa sổ Chế độ hình thu nhỏ trong tài liệu.

async function initDocumentPip() {
  if (!isPipSupported) {
    return false;
  }

  const pipWindow = await documentPictureInPicture.requestWindow({
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

Tuỳ thuộc vào trường hợp sử dụng, bạn có thể chỉ định chiều rộng và chiều cao bất kỳ cho cửa sổ. Bạn có thể thử so khớp một phần tử cụ thể, tài liệu hiện tại hoặc thậm chí cung cấp các giá trị cố định.

Đến đây, bạn đã có một tài liệu trống. Bây giờ, bạn cần điền nội dung vào danh sách này.

// htmlCode is the HTML code of the challenge
pipWindow.document.documentElement.innerHTML = htmlCode;

Đối với các thử thách có mã CSS, bạn cũng cần đồng bộ hoá CSS.

Vậy là xong! Giờ đây, bạn có một nút phóng to mở trong một cửa sổ PiP riêng biệt.Ngoài việc phóng to thẻ xem trước của trình duyệt, bạn cũng có thể di chuyển thẻ đó sang một màn hình riêng biệt nếu có màn hình bên ngoài, hoặc thậm chí sắp xếp lại ứng dụng web chính và thẻ xem trước của trình duyệt theo bố cục cột.

Dự phòng

Hãy nhớ rằng API này có phạm vi cung cấp hạn chế. Trên các trình duyệt và thiết bị không hỗ trợ API này, bạn cần cung cấp hành vi dự phòng (hạ cấp một cách linh hoạt).

Thay vì làm cho nút phóng to kéo toàn bộ thẻ xem trước của trình duyệt ra, chúng ta có thể làm cho nút này chiếm toàn bộ không gian còn lại của ứng dụng web hiện tại.

Thử hành vi này trong các trình duyệt khác nhau: https://learnhtmlcss.online/app.html?id=2096

Đừng quên chú ý đến các chi tiết nhỏ trong chú giải công cụ. Khi isPipSupported là true, chú giải công cụ của nút mở rộng/thu nhỏ sẽ bật/tắt giữa Enter Picture-in-Picture (Bắt đầu chế độ Hình trong hình) và Exit Picture-in-Picture (Thoát khỏi chế độ Hình trong hình). Mặt khác, khi isPipSupported là false, hành vi dự phòng được mô tả bằng Tối đa hoá và Tối thiểu hoá.

Như bạn có thể thấy, API Hình trong hình cho tài liệu có thể mở ra các trường hợp sử dụng mới và thú vị cho Ứng dụng web của bạn khi kết hợp với tính năng cải tiến dần hoặc giảm thiểu sự cố.

Đừng để khả năng hỗ trợ trình duyệt bị hạn chế làm giới hạn bạn, đồng thời đừng quên có một trường hợp sử dụng dự phòng phù hợp.

Hãy xem tài liệu về Chế độ PiP cho tài liệu để khám phá nhiều ví dụ và trường hợp sử dụng của API này.