อนาคตของการแสดงภาพซ้อนภาพ

François Beaufort
François Beaufort
GitHub

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

หน้าต่างการแสดงภาพซ้อนภาพกำลังเล่นวิดีโอตัวอย่างของ Sintel
หน้าต่างการแสดงภาพซ้อนภาพที่สร้างด้วย Document Picture-in-Picture API (การสาธิต)

โดย 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