เข้าสู่การแสดงภาพซ้อนภาพโดยอัตโนมัติเมื่อเล่นสื่อ

François Beaufort
François Beaufort

เผยแพร่เมื่อวันที่ 5 กุมภาพันธ์ 2025

ตั้งแต่ Chrome 120 เป็นต้นไป เว็บแอปการประชุมทางวิดีโอจะเปิดหน้าต่างภาพซ้อนภาพโดยอัตโนมัติเมื่อผู้ใช้เปลี่ยนโฟกัสจากแท็บปัจจุบัน ซึ่งมีประโยชน์สำหรับผู้นำเสนอที่ต้องการดูและโต้ตอบกับผู้เข้าร่วมแบบเรียลไทม์ขณะนำเสนอเอกสารหรือใช้แท็บหรือหน้าต่างอื่นๆ โปรดดูรายละเอียดที่หัวข้อการแสดงภาพซ้อนภาพอัตโนมัติสำหรับเว็บแอปการประชุมทางวิดีโอ

ตั้งแต่ Chrome 134 เป็นต้นไป เว็บแอปที่เล่นเสียงหรือวิดีโอจะเข้าสู่โหมดการแสดงภาพซ้อนภาพโดยอัตโนมัติได้ ซึ่งหมายความว่าตอนนี้โปรแกรมเล่นเพลงและวิดีโอบนเว็บจะเปลี่ยนเป็นหน้าต่างโปรแกรมเล่นขนาดเล็กได้อย่างราบรื่นเมื่อผู้ใช้สลับแท็บ ซึ่งทำให้ไม่ต้องเปิดใช้งานด้วยตนเอง

หน้าต่างภาพในภาพจะเปิดและปิดโดยอัตโนมัติเมื่อผู้ใช้ Spotify สลับแท็บ

เว็บแอปบนเดสก์ท็อปของ Chrome เวอร์ชัน 134 ขึ้นไปสามารถเข้าสู่โหมดภาพในภาพโดยอัตโนมัติเพื่อรองรับกรณีการใช้งานการเล่นสื่อเหล่านี้ โดยมีข้อจำกัดบางอย่างเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี เว็บแอปจะมีสิทธิ์ใช้ฟีเจอร์ภาพซ้อนภาพอัตโนมัติสำหรับการเล่นสื่อก็ต่อเมื่อเป็นไปตามเงื่อนไขต่อไปนี้ทั้งหมด

  • URL ของเฟรมด้านบนปลอดภัยตามบริการ Google Safe Browsing

  • สื่อจะอยู่ในเฟรมด้านบน

  • ได้ยินเสียงสื่อภายใน 2 วินาทีที่ผ่านมา

  • สื่อมีโฟกัสเสียง

  • สื่อกำลังเล่นอยู่

  • ลงทะเบียนตัวแฮนเดิลการดำเนินการของเซสชันสื่อสําหรับการดําเนินการ "enterpictureinpicture" แล้ว

  • ดัชนีการมีส่วนร่วมกับสื่อของผู้ใช้สูงกว่าเกณฑ์ ซึ่งบ่งชี้ว่าผู้ใช้บริโภคสื่อในเว็บแอปนี้บ่อยครั้ง กรณีนี้จะเกิดขึ้นเมื่อการตั้งค่าเบราว์เซอร์ของผู้ใช้คือ "ขอเข้าสู่โหมดภาพในภาพได้" แต่หากผู้ใช้อนุญาตให้เว็บแอปเข้าสู่โหมดภาพซ้อนภาพอย่างชัดเจน เงื่อนไขนี้จะไม่มีผล

การตั้งค่าการแสดงภาพซ้อนภาพอัตโนมัติในแผงข้อมูลเว็บไซต์ของเบราว์เซอร์ Chrome
การตั้งค่าภาพในภาพอัตโนมัติในแผงข้อมูลเว็บไซต์ของเบราว์เซอร์ Chrome

ข้อบกพร่อง 386193409 จะติดตามการติดตั้งใช้งานเงื่อนไขการแสดงผลเพื่อทําให้การแก้ไขข้อบกพร่องและการติดตั้งใช้งานง่ายขึ้น

โปรดทราบว่าหากหน้าต่างการแสดงภาพซ้อนภาพอื่นเปิดอยู่ Chrome จะไม่เปิดใช้การแสดงภาพซ้อนภาพอัตโนมัติ กฎนี้จะไม่มีผลหากหน้าต่างภาพซ้อนภาพที่มีอยู่เปิดขึ้นโดยอัตโนมัติและกำลังจะปิด

เมื่อเว็บแอปเป็นไปตามข้อกำหนดแล้ว การเปลี่ยนโฟกัสไปยังแท็บอื่นจะทริกเกอร์ฟังก์ชัน Callback ของตัวแฮนเดิลการดำเนินการของเซสชันสื่อสําหรับการดําเนินการ "enterpictureinpicture" ซึ่งจะช่วยให้เว็บแอปเปิดหน้าต่างการแสดงภาพซ้อนภาพได้โดยไม่ต้องใช้ท่าทางสัมผัสของผู้ใช้ จากนั้นระบบอาจแสดงกล่องโต้ตอบสิทธิ์เพื่อถามว่าผู้ใช้ต้องการอนุญาตให้เว็บไซต์เข้าสู่โหมดภาพซ้อนภาพโดยอัตโนมัติทุกครั้ง เฉพาะครั้งนี้ หรือไม่เคย

การซ้อนทับสิทธิ์ในหน้าต่างการแสดงภาพซ้อนภาพซึ่งถามผู้ใช้ว่าต้องการอนุญาตให้เว็บไซต์เข้าสู่การแสดงภาพซ้อนภาพโดยอัตโนมัติหรือไม่
ระบบจะถามผู้ใช้ว่าอนุญาตให้เข้าสู่โหมดภาพซ้อนภาพโดยอัตโนมัติหรือไม่

คุณสามารถใช้ 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 สำหรับรีวิว