จากการเปิดตัวล่าสุดของ Document Picture-in-Picture API (และแม้แต่ก่อนหน้านี้) นักพัฒนาเว็บให้ความสนใจมากขึ้นที่ความสามารถในการเปิดหน้าต่างการแสดงภาพซ้อนภาพโดยอัตโนมัติเมื่อผู้ใช้เปลี่ยนโฟกัสจากแท็บปัจจุบัน ซึ่งมีประโยชน์อย่างยิ่งสำหรับเว็บแอปการประชุมทางวิดีโอ เพราะช่วยให้ผู้นำเสนอเห็นและโต้ตอบกับผู้เข้าร่วมได้แบบเรียลไทม์ในขณะที่นำเสนอเอกสารหรือใช้แท็บหรือหน้าต่างอื่น
เข้าสู่การแสดงภาพซ้อนภาพโดยอัตโนมัติ
เว็บแอปบนเดสก์ท็อปใน Chrome 120 สามารถเข้าสู่การแสดงภาพซ้อนภาพโดยอัตโนมัติได้ โดยมีข้อจำกัดบางประการเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี เพื่อให้รองรับกรณีการใช้งานการประชุมทางวิดีโอเหล่านี้ เว็บแอปจะมีสิทธิ์ใช้การแสดงภาพซ้อนภาพอัตโนมัติเมื่อเป็นไปตามเงื่อนไขต่อไปนี้ทั้งหมดเท่านั้น
ลงทะเบียนเครื่องจัดการการดำเนินการเซสชันสื่อสำหรับการดำเนินการ
"enterpictureinpicture"แล้วกำลังจับภาพกล้องหรือไมโครโฟนผ่าน getUserMedia
ผู้ใช้อนุญาต "การแสดงภาพซ้อนภาพอัตโนมัติ" ผ่านการตั้งค่าเบราว์เซอร์ที่เปิดใช้โดยค่าเริ่มต้น
เมื่อเว็บแอปมีสิทธิ์ ฟังก์ชันเรียกกลับของตัวแฮนเดิลการดำเนินการเซสชันสื่อสำหรับการดำเนินการ "enterpictureinpicture" จะเริ่มทำงานเมื่อผู้ใช้เปลี่ยนโฟกัสไปยังแท็บอื่น ซึ่งช่วยให้เปิดหน้าต่างการแสดงภาพซ้อนภาพได้โดยไม่ต้องใช้ท่าทางสัมผัสของผู้ใช้
นักพัฒนาเว็บสามารถใช้ Picture-in-Picture API สำหรับ <video> เพื่อเปิดหน้าต่างการแสดงภาพซ้อนภาพจากองค์ประกอบ HTML <video> หรือใช้ Document Picture-in-Picture API เพื่อเปิดหน้าต่างด้านบนตลอดเวลาและเติมเนื้อหา HTML ที่กำหนดเอง หน้าต่างการแสดงภาพซ้อนภาพจะไม่โฟกัสเมื่อเปิดและปิดโดยอัตโนมัติเมื่อการมองเห็นหน้าเว็บกลับมาปรากฏอีกครั้ง
ตัวอย่างต่อไปนี้แสดงวิธีขอสิทธิ์เข้าถึงกล้องของผู้ใช้ จากนั้นลงทะเบียนเครื่องจัดการเซสชันสื่อสำหรับการกระทำ "enterpictureinpicture" อย่างปลอดภัยด้วยฟังก์ชันเรียกกลับที่เปิดหน้าต่างการแสดงภาพซ้อนภาพ หน้าต่างนี้จะมีสตรีมวิดีโอจากกล้องของผู้ใช้ที่มี Picture-in-Picture API สำหรับ <video>
const video = document.querySelector("video");
// Request access to the user's camera.
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
video.srcObject = stream;
});
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", () => {
video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
ลองใช้ตัวอย่างเซสชันสื่อการประชุมทางวิดีโอ
เข้าสู่การแสดงภาพซ้อนภาพจากการควบคุมสื่อของเบราว์เซอร์
การทำงานของเซสชันสื่อ "enterpictureinpicture" ยังมีประโยชน์เมื่อผู้ใช้ต้องการเข้าสู่การแสดงภาพซ้อนภาพโดยใช้ตัวควบคุมสื่อใน UI ของเบราว์เซอร์ Chrome อีกด้วย
เมื่อไม่มีองค์ประกอบ <video> ของ HTML เล่นแต่มีเพียงเสียง การลงทะเบียนเครื่องจัดการการดำเนินการเซสชันสื่อสำหรับ "enterpictureinpicture" จะบอกเบราว์เซอร์ว่าเว็บแอปรู้วิธีจัดการและจะเปิดหน้าต่างการแสดงภาพซ้อนภาพเอง
นอกจากนี้ ยังมีประโยชน์เมื่อเว็บแอปต้องการใช้ Document Picture-in-Picture API เพื่อเปิดหน้าต่างการแสดงภาพซ้อนภาพแทนที่จะให้เบราว์เซอร์จัดการด้วย Picture-in-Picture API สำหรับ <video>
ตัวอย่างต่อไปนี้แสดงวิธีลงทะเบียนเครื่องจัดการการดำเนินการเซสชันสื่อสำหรับการกระทำ "enterpictureinpicture" อย่างปลอดภัย ฟังก์ชันเรียกกลับจะเปิดหน้าต่างการแสดงภาพซ้อนภาพด้วย Document Picture-in-Picture API เมื่อผู้ใช้เข้าสู่การแสดงภาพซ้อนภาพโดยใช้ตัวควบคุมสื่อใน UI ของเบราว์เซอร์ Chrome
try {
// Use the Document Picture-in-Picture API when entering
// picture-in-picture from browser media control.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
const pipWindow = await documentPictureInPicture.requestWindow();
// Populate HTML content and handle closing window...
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
ลองใช้เอกสาร Picture-in-Picture API ที่การสาธิตโปรแกรมเล่น VideoJS หรือตัวอย่างเซสชันสื่อวิดีโอ
มีส่วนร่วมและแชร์ความคิดเห็น
หากมีความคิดเห็นหรือพบปัญหา โปรดแชร์ความคิดเห็นเหล่านั้นที่ crbug.com
แหล่งข้อมูล
บริการรับรองคำให้การ
ขอขอบคุณ Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato และ Rachel Andrew ผู้ที่เขียนรีวิว