ปลดล็อกกรณีการใช้งานที่น่าสนใจด้วย Document Picture-in-Picture API

Jad Joubran

เผยแพร่: 4 มีนาคม 2025

Document Picture-in-Picture API (Document PiP API) ช่วยให้เว็บแอปพลิเคชันเปิดหน้าต่างลอยที่อยู่ด้านบนสุดเสมอ (หน้าต่างภาพในภาพ) ซึ่งแสดงเนื้อหา HTML ใดก็ได้

API นี้สร้างขึ้นจาก Picture-in-Picture API สำหรับ <video> ซึ่งช่วยให้คุณรับชมวิดีโอต่อในหน้าต่าง PIP ได้

เนื่องจาก Document PiP API แสดงเนื้อหา HTML ใดก็ได้ คุณจึงใช้ API นี้เพื่อปลดล็อก Use Case ใหม่ๆ ที่น่าสนใจได้

การรองรับเบราว์เซอร์และการเพิ่มประสิทธิภาพแบบต่อเนื่อง

ขณะที่เขียนอยู่นี้ Document Picture-in-Picture API มีให้บริการแบบจำกัด

อย่างไรก็ตาม คุณไม่ควรหยุดใช้ฟีเจอร์นี้กับ การเพิ่มประสิทธิภาพแบบค่อยเป็นค่อยไปหรือ การลดประสิทธิภาพอย่างราบรื่น

เมื่อวางแผน Use Case ให้ถือว่าเป็นการเพิ่มประสิทธิภาพแบบต่อเนื่องแทนที่จะเป็นฟีเจอร์มาตรฐาน ในบทความนี้ คุณจะเห็นตัวอย่างการลดลงอย่างค่อยเป็นค่อยไป

การปรับปรุงประสบการณ์ของผู้ใช้สำหรับผู้เรียนด้วย Document PiP API

LearnHTMLCSS.online เป็นแพลตฟอร์มการเรียนรู้แบบอินเทอร์แอกทีฟที่สอน HTML และ CSS ที่มีความหมายและเข้าถึงได้ โดยมีเครื่องมือแก้ไขข้อความแบบอินเทอร์แอกทีฟและหน้าต่างแสดงตัวอย่างในเบราว์เซอร์

ภาพหน้าจอต่อไปนี้แสดงเลย์เอาต์ของแอป โดยหน้าจอจะแบ่งออกเป็น 2 คอลัมน์ คอลัมน์แรกมีตัวแก้ไขโค้ด คอลัมน์ที่ 2 มีเลย์เอาต์แบบแท็บ โดยค่าเริ่มต้น ผู้ใช้จะเห็นวิธีการของชาเลนจ์ และคลิกแท็บเบราว์เซอร์เพื่อดูตัวอย่างแบบเรียลไทม์ได้

ในฐานะนักเรียน/นักศึกษา บางครั้งคุณอาจต้องการขยายหน้าต่างตัวอย่างของเบราว์เซอร์ให้ใหญ่ที่สุด นี่เป็นโอกาสที่ดีในการเพิ่มการรองรับ Document Picture-in-Picture API

หากต้องการใช้ฟีเจอร์นี้ ให้เริ่มด้วยการตรวจสอบว่าเบราว์เซอร์รองรับหรือไม่

const isPipSupported = "documentPictureInPicture" in window;

ตอนนี้คุณใช้ตัวแปรนี้เพื่อเรียกใช้ฟังก์ชัน documentPictureInPicture หรือเพื่อกลับจากฟังก์ชันที่ใช้ Picture-in-Picture ของเอกสารก่อนเวลาได้แล้ว โค้ดต่อไปนี้จะตรวจสอบการรองรับ PIP ของเอกสาร แล้วเปิดหน้าต่าง PIP ของเอกสาร

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

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

คุณระบุความกว้างและความสูงของหน้าต่างได้ตามกรณีการใช้งาน คุณลองจับคู่องค์ประกอบที่เฉพาะเจาะจง เอกสารปัจจุบัน หรือแม้แต่ระบุค่าคงที่ก็ได้

ตอนนี้คุณมีเอกสารเปล่าแล้ว คุณจะต้องป้อนเนื้อหาลงในเอกสาร

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

หากพบปัญหาเกี่ยวกับโค้ด CSS คุณจะต้องซิงค์ CSS ด้วย

เท่านี้ก็เรียบร้อย ตอนนี้คุณมีปุ่มขยายที่จะเปิดในหน้าต่าง PIP แยกต่างหากแล้ว นอกจากจะขยายแท็บแสดงตัวอย่างเบราว์เซอร์ได้แล้ว คุณยังย้ายแท็บไปยังหน้าจออื่นได้ด้วยหากมีจอภาพภายนอก หรือแม้แต่จัดเรียงเว็บแอปหลักและแท็บแสดงตัวอย่างเบราว์เซอร์ใหม่ในเลย์เอาต์คอลัมน์ก็ได้

Fallback

โปรดทราบว่า API นี้มีให้บริการแบบจำกัด ในเบราว์เซอร์และอุปกรณ์ที่ไม่รองรับ API นี้ คุณจะต้องระบุลักษณะการทำงานสำรอง (การลดลงอย่างค่อยเป็นค่อยไป)

แทนที่จะให้ปุ่มขยายดึงแท็บแสดงตัวอย่างเบราว์เซอร์ทั้งหมดออกมา เราสามารถทำให้ปุ่มนี้ใช้พื้นที่ที่เหลือทั้งหมดของเว็บแอปปัจจุบันได้

ลองดูพฤติกรรมนี้ในเบราว์เซอร์ต่างๆ ที่ https://learnhtmlcss.online/app.html?id=2096

อย่าลืมสังเกตรายละเอียดเล็กๆ น้อยๆ ในเคล็ดลับเครื่องมือ เมื่อ isPipSupported เป็น true คำอธิบายเครื่องมือของปุ่มขยาย/ย่อจะสลับระหว่างเข้าสู่การแสดงภาพซ้อนภาพและออกจากการแสดงภาพซ้อนภาพ ในทางกลับกัน เมื่อ isPipSupported เป็น false ลักษณะการทำงานสำรองจะอธิบายด้วย Maximize และ Minimize

ดังที่เห็นได้ว่า Document Picture-in-Picture API สามารถปลดล็อก Use Case ใหม่ๆ ที่น่าสนใจสำหรับเว็บแอปของคุณเมื่อใช้ร่วมกับการเพิ่มประสิทธิภาพแบบต่อเนื่องหรือการลดลงอย่างค่อยเป็นค่อยไป

อย่าปล่อยให้การรองรับเบราว์เซอร์ที่จำกัดมาจำกัดคุณ และอย่าลืมมีกรณีการใช้งานสำรองที่เหมาะสม

ดูตัวอย่างและกรณีการใช้งานต่างๆ ของ API นี้ได้ในเอกสารประกอบสำหรับ Document PiP