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

François Beaufort

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

Document Picture-in-Picture API (Pencere İçinde Pencere API'si) ile oluşturulmuş pencere içinde pencere penceresi (tanıtım).

Yeni API, <video> için mevcut Pencere İçinde Pencere API'si ile sunulandan ç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 işaretçisi, videoları beğenme ve beğenmeme) sağlayabilirsiniz.

Tam Pencere İçinde Pencere özelliği sayesinde video konferans web uygulamaları, kanvas bilgilerine gerek kalmadan birden fazla video akışını tek 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 denetimler de sağlayabilirler.

Aşağıdaki kod snippet'inde, özel bir video oynatıcı için Pencere İçinde Pencere ayarını nasıl değiştireceğiniz gösterilmektedir.

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 için <video> yerine herhangi bir öğe için Pencere İçinde Pencere bölümüne göz atın.

Bu aşamada geliştirici geri bildirimleri gerçekten önemlidir, bu nedenle lütfen önerilerinizi ve sorularınızı GitHub'da bildirin.

Hero resim: Jakob Owens.