Pencere içinde pencere özelliğinin geleceği

François Beaufort

Document Picture-in-Picture API'den önce, HTML <video> öğesi yalnızca Pencere İçinde Pencere penceresine yerleştirilebiliyordu. Bu yeni API, rastgele HTML içeriğiyle doldurulabilecek her zaman açık bir pencerenin açılmasını mümkün kılar. Masaüstünde Chrome 111 sürümünden itibaren kaynak denemesi olarak kullanılabilir.

Document Picture-in-Picture API ile oluşturulan bir Pencere İçinde Pencere penceresi (demo).

Yeni API, mevcut <video> için Resim İçinde Resim API'sinde sunulanlardan çok daha fazlasını sunar. Örneğin, kullanıcının Pencere İçinde Pencere video oynatıcı deneyimini iyileştirmek için özel kontroller ve girişler (örneğin, altyazılar, oynatma listeleri, zaman yükleme göstergesi, videoları beğenme ve beğenmeme) sağlayabilirsiniz.

"Pencere İçinde Pencere" modunda eksiksiz bir doküman sayesinde video konferans web uygulamaları, tuval korsanlığına gerek kalmadan birden fazla video akışını bir Pencere İçinde Pencere penceresinde birleştirebilir. Ayrıca mesaj gönderme, başka bir kullanıcıyı yoksayma veya söz isteme gibi özel kontroller de sağlayabilirler.

Aşağıdaki kod snippet'i, özel bir video oynatıcı için Pencere İçinde Pencere özelliğini nasıl açacağınızı gösterir.

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);
  });
}

Daha fazla bilgi edinmek amacıyla <video> değil, istediğiniz öğe için Pencere İçinde Pencere özelliğine göz atın.

Bu aşamada geliştiricilerden gelen geri bildirimler çok önemlidir. Bu nedenle, sorunlarınızı GitHub'da belirterek önerilerinizi ve sorularınızı iletebilirsiniz.

Jakob Owens'ın lokomotif resmi.