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 xuất bản: 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ị mọi nội dung HTML tuỳ ý.

API này được xây dựng dựa trên Picture-in-Picture API 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ị mọi nội dung HTML tuỳ ý, nên bạn có thể dùng API này để mở ra các trường hợp sử dụng mới thú vị.

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

Tại thời điểm viết bài này, Document Picture-in-Picture API được cung cấp có giới hạn.

Tuy nhiên, điều này không nên ngăn bạn sử dụng API này với cải tiến tăng dần hoặc xuống cấp nhẹ.

Khi lên kế hoạch cho trường hợp sử dụng, hãy nhớ coi đây là một tính năng cải tiến tăng dần thay vì một tính năng tiêu chuẩn. Trong bài viết này, bạn sẽ thấy ví dụ về xuống cấp nhẹ.

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 về HTML và CSS ngữ nghĩa và dễ tiếp cận. Nền tảng 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ên trình duyệt.

Ảnh chụp 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 2 cột. Cột đầu tiên chứa trình chỉnh sửa 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à nhấp vào thẻ Trình duyệt để xem bản xem trước trực tiếp.

Là học viên, đôi khi bạn có thể muốn tối đa hoá cửa sổ xem trước trên trình duyệt. Đây là cơ hội hoàn hảo để thêm tính năng hỗ trợ cho Document Picture-in-Picture API.

Để 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ể dùng biến này để gói mọi lệnh gọi documentPictureInPicture hoặc để trả về sớm từ một hàm dựa vào Document PiP. Đoạn mã sau đây sẽ kiểm tra xem Document PiP có được hỗ trợ hay không, sau đó mở một cửa sổ Document PiP.

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 mọi chiều rộng và chiều cao cho cửa sổ. Bạn có thể thử khớp với 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.

Cho đến nay, bạn có một tài liệu trống. Giờ đây, bạn cần điền nội dung vào tài liệu đó.

// 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 tối đa hoá mở ra trong một cửa sổ PiP riêng biệt.Ngoài việc tối đa hoá thẻ xem trước trên trình duyệt, bạn cũng có thể di chuyển thẻ này 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 trên trình duyệt theo bố cục cột.

Dự phòng

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

Thay vì làm cho nút tối đa hoá kéo toàn bộ thẻ xem trước trên 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.

Hãy 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 tối đa hoá/thu nhỏ sẽ chuyển đổi giữa Enter Picture-in-Picture (Vào 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 Maximize (Tối đa hoá) và Minimize (Thu nhỏ).

Như bạn có thể thấy, Document Picture-in-Picture API có thể mở ra các trường hợp sử dụng mới 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 tăng dần hoặc xuống cấp nhẹ.

Đừng để tính năng hỗ trợ trình duyệt có giới hạn cản trở bạn và đừ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ề Document PiP để khám phá nhiều ví dụ và trường hợp sử dụng của API này.