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

Xuất bản: Ngày 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 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ị mọi nội dung HTML tuỳ ý, nên bạn có thể dùng API này để mở ra những trường hợp sử dụng mới thú vị.

Hỗ trợ trình duyệt và cải tiến từng bước

Tại thời điểm viết bài này, Document Picture-in-Picture API chỉ đượ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 nó với tính năng cải tiến tăng dần hoặc giảm cấp một cách linh hoạt.

Khi lập kế hoạch cho trường hợp sử dụng của bạn, hãy nhớ coi đó 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 êm ái.

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 có tính tương tác, dạy về HTML và CSS ngữ nghĩa và dễ truy cập. 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.

Đoạn video 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 một 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.

Đôi khi, học viên có thể muốn phóng to tối đa cửa sổ xem trước của 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 để bao bọc mọi lệnh gọi documentPictureInPicture hoặc để sớm trả về từ một hàm dựa vào tính năng PiP cho tài liệu. Đoạn mã sau đây kiểm tra xem có hỗ trợ chế độ PiP cho tài liệu hay không, sau đó mở một cửa sổ PiP cho 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.

Cho đến nay, bạn chưa có tài liệu nào. Giờ đây, bạn cần điền nội dung vào đó.

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

Đối với các vấn đề về 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ẻ này sang một màn hình riêng nếu có màn hình 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

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

Thay vì khiến nút phóng to kéo toàn bộ thẻ xem trước trình duyệt ra, chúng ta có thể khiến 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 những chi tiết nhỏ trong chú thích. Khi isPipSupported là true, chú thích của nút phóng to/thu nhỏ sẽ chuyển đổi giữa Chuyển sang chế độ hình trong hình và Thoát 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 và Minimize.

Như bạn có thể thấy, Document Picture-in-Picture API có thể mở ra những 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 giảm cấp một cách linh hoạt.

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

Hãy xem tài liệu về tính năng 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.