หน้านี้ได้รับการแปลโดย Cloud Translation API

ปลดล็อกกรณีการใช้งานที่น่าสนใจด้วย 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 นี้เพื่อปลดล็อกกรณีการใช้งานใหม่ๆ ที่น่าตื่นเต้นได้

การรองรับเบราว์เซอร์และการปรับปรุงแบบเป็นขั้นๆ

Browser Support

Source

ขณะเขียน 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 หรือเพื่อออกก่อนกำหนดจากฟังก์ชันที่อาศัย 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 สามารถปลดล็อกกรณีการใช้งานใหม่ๆ ที่น่าตื่นเต้นสำหรับเว็บแอปของคุณเมื่อใช้ร่วมกับ Progressive Enhancement หรือ Graceful Degradation

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

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