เผยแพร่: 4 มีนาคม 2025
Document Picture-in-Picture API (Document PiP API) ช่วยให้เว็บแอปพลิเคชันเปิดหน้าต่างแบบลอยตัวที่แสดงอยู่ด้านบนเสมอ (หน้าต่างภาพซ้อนภาพ) ซึ่งสามารถแสดงเนื้อหา HTML ใดก็ได้
API นี้สร้างขึ้นจาก Picture-in-Picture API สำหรับ <video>
ซึ่งจะช่วยให้คุณรับชมวิดีโอในหน้าต่าง PiP ต่อไปได้
เนื่องจาก Document PiP API สามารถแสดงเนื้อหา HTML ใดก็ได้ คุณจึงใช้ API นี้เพื่อปลดล็อกกรณีการใช้งานใหม่ๆ ที่น่าตื่นเต้นได้
การรองรับเบราว์เซอร์และการปรับปรุงแบบเป็นขั้นๆ
ขณะเขียน 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 นี้