เข้าสู่การแสดงภาพซ้อนภาพของวิดีโอบนเว็บไซต์อื่นๆ โดยอัตโนมัติ

Benjamin Keen

François Beaufort

เผยแพร่: 18 มีนาคม 2026

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

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

วิธีการ

• ใช้ Chrome 142 หรือเวอร์ชันที่ใหม่กว่าบนเดสก์ท็อป
• เปิดใช้ "ภาพซ้อนภาพอัตโนมัติที่เบราว์เซอร์เริ่ม" ใน chrome://flags/#browser-initiated-automatic-picture-in-picture แล้วรีสตาร์ท Chrome
• ไปที่เว็บไซต์วิดีโอและเล่นวิดีโอ (ตัวอย่าง)
• สลับไปใช้แท็บ Chrome อื่นเพื่อเรียกใช้หน้าต่าง PIP ของวิดีโอ

วิธีการทำงาน

เมื่อคุณเล่นสื่อและเปลี่ยนไปใช้แท็บอื่น Chrome จะย้ายสื่อไปยังหน้าต่าง PIP ของวิดีโอที่อยู่ด้านบนสุดเสมอโดยอัตโนมัติ ต่างจาก "ฟีเจอร์ PIP อัตโนมัติสำหรับการเล่นสื่อ" ที่มีอยู่ ซึ่งรองรับทั้งวิดีโอหรือเนื้อหา HTML ที่กำหนดเอง (ใช้ Document Picture-in-Picture API) คำขอที่เบราว์เซอร์เริ่มต้นจะเปิดหน้าต่าง PIP วิดีโอมาตรฐานเสมอ

Chrome จะทริกเกอร์ลักษณะการทำงานนี้เฉพาะเมื่อตรงตามชุดเงื่อนไขที่เข้มงวดเท่านั้น เพื่อให้มั่นใจว่าผู้ใช้จะได้รับประสบการณ์การใช้งานที่มีคุณภาพสูงและไม่รบกวนการใช้งาน

• URL ของเฟรมบนสุดปลอดภัยตามบริการ Google Safe Browsing
• สื่อจะอยู่ในเฟรมด้านบน
• สื่อมีเสียงในช่วง 2 วินาทีที่ผ่านมา
• สื่อมีโฟกัสเสียงและกำลังเล่นอยู่
• มีผู้เล่น "ปกติ" รายเดียว ซึ่งก็คือองค์ประกอบสื่อที่ไม่ได้ปิดเสียงซึ่งเล่นอยู่และไม่ได้ใช้ MediaStream
• องค์ประกอบสื่อต้องมีแทร็กวิดีโอ
• เว็บไซต์ไม่ได้ใช้กล้องหรือไมโครโฟนอยู่
• เกินเกณฑ์ดัชนีการมีส่วนร่วมกับสื่อของผู้ใช้ ซึ่งบ่งบอกถึงการใช้งานเว็บไซต์บ่อยครั้ง เงื่อนไขนี้จะมีผลหากผู้ใช้ไม่ได้อนุญาตหรือปฏิเสธฟีเจอร์อย่างชัดเจน
• ขณะนี้ไม่มีหน้าต่าง PIP เปิดอยู่ หากมีหน้าต่าง PIP อื่นเปิดอยู่แล้ว Chrome จะไม่ทริกเกอร์การเปลี่ยนอัตโนมัติ

การควบคุมและความเป็นส่วนตัวของผู้ใช้

Auto PiP ที่เบราว์เซอร์เริ่มต้นจะใช้สิทธิ์และการตั้งค่าของผู้ใช้เดียวกันกับคำขอที่เว็บไซต์เริ่มต้น ครั้งแรกที่เว็บไซต์เข้าสู่โหมด PIP โดยอัตโนมัติ Chrome จะแสดงกล่องโต้ตอบการให้สิทธิ์แก่ผู้ใช้เพื่อถามว่าต้องการอนุญาตให้เว็บไซต์มีลักษณะการทำงานเช่นนี้ในอนาคตหรือไม่

นอกจากนี้ ผู้ใช้ยังจัดการสิทธิ์เหล่านี้ได้ทุกเมื่อผ่าน "การตั้งค่าเว็บไซต์"

การควบคุมและการเลือกไม่ใช้ของนักพัฒนาแอป

แม้ว่าฟีเจอร์นี้จะออกแบบมาให้ใช้งานได้ทันทีสำหรับเว็บไซต์วิดีโอส่วนใหญ่ แต่คุณก็เลือกไม่ใช้ลักษณะการทำงานนี้ได้

ใช้ตัวแฮนเดิลของคุณเอง

หากเว็บแอปของคุณลงทะเบียนตัวแฮนเดิลการดำเนินการของเซสชันสื่อสำหรับการดำเนินการ enterpictureinpicture อยู่แล้ว การติดตั้งใช้งานของคุณจะมีลำดับความสำคัญสูงกว่า และ Chrome จะไม่เริ่มการเปลี่ยนอัตโนมัติของตัวเอง

หากต้องการปรับแต่งลักษณะการทำงานเมื่อ Chrome คิดว่าการเปลี่ยนผ่านเหมาะสม ตัวแฮนเดิลการดำเนินการ enterpictureinpicture จะมี reason ใน MediaSessionActionDetails คุณตรวจสอบได้ว่า reason เป็น contentoccluded หรือไม่ (ซึ่งหมายความว่าเบราว์เซอร์เริ่มคำขอเนื่องจากซ่อนแท็บไว้) และเลือกว่าจะดำเนินการอย่างไรต่อ

navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
  if (details.reason === "contentoccluded") {
    // The browser suggests entering Picture-in-Picture.
    // You can choose to open a standard video PiP or a Document PiP window, or do
    // nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
  }
});

แนวทางปฏิบัติแนะนำสำหรับเซสชันสื่อ

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

ซิงค์แถบความคืบหน้า

หากใช้ setPositionState API และไม่ได้อัปเดตตำแหน่งเซสชันสื่ออย่างถูกต้อง หน้าต่าง PIP จะแสดงแถบความคืบหน้าที่ไม่ถูกต้องในระหว่างการเล่นสื่อ เพื่อป้องกันปัญหานี้ ให้อัปเดตหรือยกเลิกการตั้งค่า position state โดยใช้ navigator.mediaSession.setPositionState() ตามความเหมาะสมเสมอ (เช่น เมื่อแหล่งที่มาของสื่อมีการเปลี่ยนแปลงหรือรีเซ็ต) เพื่อให้หน้าต่าง PiP แสดงตำแหน่งที่ถูกต้องสำหรับสื่อที่เล่น

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);

จัดการการเปลี่ยนผ่านอย่างราบรื่น

หากเว็บไซต์เล่น "ตอนถัดไป" โดยอัตโนมัติ โปรดตรวจสอบว่าMediaSessionตัวแฮนเดิลการดำเนินการและข้อมูลเมตายังคงทำงานและถูกต้องตลอดการเปลี่ยนผ่าน หากมีการนำตัวแฮนเดิลการดำเนินการออกหรือไม่ได้ตั้งค่าไว้ในระหว่างการเปลี่ยนไปใช้องค์ประกอบ "ถัดไป" หน้าต่าง PIP อาจสูญเสียความสามารถที่ตัวแฮนเดิลมีให้

เปิดใช้การควบคุมทั้งหมด

นอกเหนือจากการเล่นและหยุดชั่วคราวขั้นพื้นฐานแล้ว ให้พิจารณาใช้ตัวแฮนเดิลสำหรับ seekto, previoustrack และ nexttrack ซึ่งจะช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของเนื้อหาได้โดยตรงจากหน้าต่าง PIP โดยไม่ต้องกลับไปที่แท็บเดิม

navigator.mediaSession.setActionHandler("seekto", (details) => {
  if (details.fastSeek && "fastSeek" in video) {
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
});

มีส่วนร่วมและแชร์ความคิดเห็น

หากมีความคิดเห็นหรือพบปัญหาเกี่ยวกับลักษณะการทำงานนี้ โปรดแชร์ที่ crbug.com

แหล่งข้อมูล

• การเปลี่ยนแปลงข้อกำหนด
• รายการใน ChromeStatus
• ความตั้งใจที่จะจัดส่ง
• ปัญหาเกี่ยวกับ Chromium
• เข้าสู่การแสดงภาพซ้อนภาพโดยอัตโนมัติเมื่อเล่นสื่อ
• โหมดภาพซ้อนภาพสำหรับองค์ประกอบใดก็ได้ ไม่ใช่แค่ <video>
• อนาคตของการแสดงภาพซ้อนภาพ