เผยแพร่เมื่อวันที่ 5 กุมภาพันธ์ 2025
ตั้งแต่ Chrome 120 เป็นต้นไป เว็บแอปการประชุมทางวิดีโอจะเปิดหน้าต่างภาพซ้อนภาพโดยอัตโนมัติเมื่อผู้ใช้เปลี่ยนโฟกัสจากแท็บปัจจุบัน ซึ่งมีประโยชน์สำหรับผู้นำเสนอที่ต้องการดูและโต้ตอบกับผู้เข้าร่วมแบบเรียลไทม์ขณะนำเสนอเอกสารหรือใช้แท็บหรือหน้าต่างอื่นๆ โปรดดูรายละเอียดที่หัวข้อการแสดงภาพซ้อนภาพอัตโนมัติสำหรับเว็บแอปการประชุมทางวิดีโอ
ตั้งแต่ Chrome 134 เป็นต้นไป เว็บแอปที่เล่นเสียงหรือวิดีโอจะเข้าสู่โหมดการแสดงภาพซ้อนภาพโดยอัตโนมัติได้ ซึ่งหมายความว่าตอนนี้โปรแกรมเล่นเพลงและวิดีโอบนเว็บจะเปลี่ยนเป็นหน้าต่างโปรแกรมเล่นขนาดเล็กได้อย่างราบรื่นเมื่อผู้ใช้สลับแท็บ ซึ่งทำให้ไม่ต้องเปิดใช้งานด้วยตนเอง
เว็บแอปบนเดสก์ท็อปของ Chrome เวอร์ชัน 134 ขึ้นไปสามารถเข้าสู่โหมดภาพในภาพโดยอัตโนมัติเพื่อรองรับกรณีการใช้งานการเล่นสื่อเหล่านี้ โดยมีข้อจำกัดบางอย่างเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี เว็บแอปจะมีสิทธิ์ใช้ฟีเจอร์ภาพซ้อนภาพอัตโนมัติสำหรับการเล่นสื่อก็ต่อเมื่อเป็นไปตามเงื่อนไขต่อไปนี้ทั้งหมด
URL ของเฟรมด้านบนปลอดภัยตามบริการ Google Safe Browsing
สื่อจะอยู่ในเฟรมด้านบน
ได้ยินเสียงสื่อภายใน 2 วินาทีที่ผ่านมา
สื่อมีโฟกัสเสียง
สื่อกำลังเล่นอยู่
ลงทะเบียนตัวแฮนเดิลการดำเนินการของเซสชันสื่อสําหรับการดําเนินการ
"enterpictureinpicture"
แล้วดัชนีการมีส่วนร่วมกับสื่อของผู้ใช้สูงกว่าเกณฑ์ ซึ่งบ่งชี้ว่าผู้ใช้บริโภคสื่อในเว็บแอปนี้บ่อยครั้ง กรณีนี้จะเกิดขึ้นเมื่อการตั้งค่าเบราว์เซอร์ของผู้ใช้คือ "ขอเข้าสู่โหมดภาพในภาพได้" แต่หากผู้ใช้อนุญาตให้เว็บแอปเข้าสู่โหมดภาพซ้อนภาพอย่างชัดเจน เงื่อนไขนี้จะไม่มีผล
![การตั้งค่าการแสดงภาพซ้อนภาพอัตโนมัติในแผงข้อมูลเว็บไซต์ของเบราว์เซอร์ Chrome](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/browser-setting.jpg?hl=th)
ข้อบกพร่อง 386193409 จะติดตามการติดตั้งใช้งานเงื่อนไขการแสดงผลเพื่อทําให้การแก้ไขข้อบกพร่องและการติดตั้งใช้งานง่ายขึ้น
โปรดทราบว่าหากหน้าต่างการแสดงภาพซ้อนภาพอื่นเปิดอยู่ Chrome จะไม่เปิดใช้การแสดงภาพซ้อนภาพอัตโนมัติ กฎนี้จะไม่มีผลหากหน้าต่างภาพซ้อนภาพที่มีอยู่เปิดขึ้นโดยอัตโนมัติและกำลังจะปิด
เมื่อเว็บแอปเป็นไปตามข้อกำหนดแล้ว การเปลี่ยนโฟกัสไปยังแท็บอื่นจะทริกเกอร์ฟังก์ชัน Callback ของตัวแฮนเดิลการดำเนินการของเซสชันสื่อสําหรับการดําเนินการ "enterpictureinpicture"
ซึ่งจะช่วยให้เว็บแอปเปิดหน้าต่างการแสดงภาพซ้อนภาพได้โดยไม่ต้องใช้ท่าทางสัมผัสของผู้ใช้ จากนั้นระบบอาจแสดงกล่องโต้ตอบสิทธิ์เพื่อถามว่าผู้ใช้ต้องการอนุญาตให้เว็บไซต์เข้าสู่โหมดภาพซ้อนภาพโดยอัตโนมัติทุกครั้ง เฉพาะครั้งนี้ หรือไม่เคย
![การซ้อนทับสิทธิ์ในหน้าต่างการแสดงภาพซ้อนภาพซึ่งถามผู้ใช้ว่าต้องการอนุญาตให้เว็บไซต์เข้าสู่การแสดงภาพซ้อนภาพโดยอัตโนมัติหรือไม่](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/pip-window-popup.jpg?hl=th)
คุณสามารถใช้ Picture-in-Picture API สำหรับ <video> เพื่อเปิดหน้าต่างการแสดงภาพซ้อนภาพจากองค์ประกอบ HTML <video>
หรือ Document Picture-in-Picture API เพื่อเปิดหน้าต่างที่แสดงอยู่ด้านบนเสมอเพื่อแสดงเนื้อหา HTML ที่กำหนดเอง หน้าต่างภาพซ้อนภาพจะไม่ได้รับการโฟกัสเมื่อเปิดขึ้น และจะปิดโดยอัตโนมัติเมื่อหน้าเว็บปรากฏขึ้นอีกครั้ง
ตัวอย่างต่อไปนี้แสดงวิธีเล่นองค์ประกอบ HTML <video>
เมื่อผู้ใช้คลิกปุ่ม จากนั้นลงทะเบียนตัวแฮนเดิลการดำเนินการของเซสชันสื่อสําหรับการดําเนินการ "enterpictureinpicture"
อย่างปลอดภัยด้วยฟังก์ชันการเรียกกลับที่เปิดหน้าต่างภาพซ้อนภาพ หน้าต่างนี้มีวิดีโอที่มี Picture-in-Picture API สำหรับ <video>
const video = document.querySelector("video");
async function onPlayButtonClick() {
// Play video.
await video.play();
}
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
await video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
ลองใช้การสาธิตโปรแกรมเล่น VideoJS ซึ่งแสดง Document Picture-in-Picture API หรือเล่นกับตัวอย่าง Video Media Session และ Audio Media Session
มีส่วนร่วมและแชร์ความคิดเห็น
หากมีความคิดเห็นหรือพบปัญหาใดๆ โปรดแชร์กับเราที่ crbug.com
แหล่งข้อมูล
บริการรับรองคำให้การ
ขอขอบคุณ Benjamin Keen และ Frank Liberato สำหรับรีวิว