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

Jad Joubran

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

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

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

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

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

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

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

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

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

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

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

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

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

const isPipSupported = "documentPictureInPicture" in window;

ตอนนี้คุณสามารถใช้ตัวแปรนี้เพื่อเรียกใช้ฟังก์ชัน documentPictureInPicture หรือเพื่อกลับจากฟังก์ชันที่ใช้ Document PiP ก่อนเวลาได้แล้ว โค้ดต่อไปนี้จะตรวจสอบการรองรับ 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