ก่อนที่จะใช้ Document Picture-in-Picture API คุณสามารถวางองค์ประกอบ HTML <video> ลงในหน้าต่างการแสดงภาพซ้อนภาพได้เท่านั้น โดย API ใหม่นี้ช่วยให้คุณเปิดหน้าต่างที่เปิดอยู่เสมอซึ่งมีเนื้อหา HTML ที่กำหนดเองได้ โดยมีให้บริการเป็นช่วงทดลองใช้จากต้นทางตั้งแต่ใน Chrome 111 บนเดสก์ท็อป
API ใหม่นี้มีมากกว่าที่มีให้ใน Picture-in-Picture API สำหรับ <video> ที่มีอยู่แล้ว ยกตัวอย่างเช่น คุณอาจให้การควบคุมและอินพุตที่กำหนดเอง (เช่น คำบรรยายวิดีโอ เพลย์ลิสต์ ตัวควบคุมเวลา การกดชอบ และการกดไม่ชอบวิดีโอ) เพื่อปรับปรุงประสบการณ์การใช้งานวิดีโอเพลเยอร์แบบภาพซ้อนภาพของผู้ใช้
เว็บแอปพลิเคชันสำหรับการประชุมทางวิดีโอที่มีเอกสารแบบการแสดงภาพซ้อนภาพแบบสมบูรณ์จะรวมสตรีมวิดีโอหลายรายการไว้ในหน้าต่างการแสดงภาพซ้อนภาพเพียงหน้าต่างเดียว โดยไม่ต้องพึ่งการแฮ็ก Canvas นอกจากนี้ยังมอบการควบคุมที่กำหนดเอง เช่น การส่งข้อความ การปิดเสียงผู้ใช้รายอื่น หรือการยกมือ
ข้อมูลโค้ดต่อไปนี้แสดงวิธีสลับการแสดงภาพซ้อนภาพสำหรับโปรแกรมเล่นวิดีโอที่กำหนดเอง
async function togglePictureInPicture() {
// Close Picture-in-Picture window if any.
if (documentPictureInPicture.window) {
documentPictureInPicture.window.close();
return;
}
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow({
initialAspectRatio: 640 / 360,
copyStyleSheets: true,
});
// Move video to the Picture-in-Picture window.
const video = document.querySelector("#video");
pipWindow.document.body.append(video);
// Listen for the PiP closing event to move the video back.
pipWindow.addEventListener("unload", (event) => {
const videoContainer = document.querySelector("#videoContainer");
const pipVideo = event.target.querySelector("#video");
videoContainer.append(pipVideo);
});
}
ดูข้อมูลเพิ่มเติมได้ที่การแสดงภาพซ้อนภาพสำหรับองค์ประกอบใดๆ ไม่ใช่แค่ <video>
ความคิดเห็นของนักพัฒนาแอปมีความสำคัญมากในขั้นตอนนี้ ดังนั้นโปรดยื่นปัญหาเกี่ยวกับ GitHub พร้อมคำแนะนำและคำถาม
รูปภาพหลักโดย Jakob Owens