← Wszystkie wpisy

Poradniki

Dodaj przycisk obraz w obrazie do dowolnego wideo

17 maja 2026 · autor JustZix Team

Obraz w obrazie pozwala filmowi pływać nad każdym innym oknem, gdy pracujesz. Przeglądarki obsługują go natywnie, ale sporo stron usuwa przycisk ze swojego odtwarzacza. Reguła JustZix przywraca go na każdym filmie.

API w jednej linii

Każdy element <video> z załadowanymi metadanymi można przenieść do pływającego okna przez video.requestPictureInPicture(). Zwraca obietnicę, a przeglądarka wymaga, by uruchomił to gest użytkownika, np. kliknięcie.

someVideo.requestPictureInPicture().catch(function (err) {
  console.warn('PiP odrzucone:', err.message);
});

To cały silnik. Reszta tego artykułu owija go w przycisk, który możesz kliknąć na dowolnej stronie.

Pływający przycisk PiP

Ta reguła wstrzykuje pojedynczy przycisk. Kliknięcie go znajduje największy odtwarzany film i wyrzuca go. Wybór największego filmu unika uruchamiania na maleńkich klipach w tle lub reklamowych.

(function () {
  if (!document.pictureInPictureEnabled) { return; }
  var btn = document.createElement('button');
  btn.textContent = 'PiP';
  btn.style.cssText = 'position:fixed;bottom:16px;right:16px;z-index:2147483647;'
    + 'background:#2563eb;color:#fff;border:0;border-radius:8px;'
    + 'padding:8px 14px;font:600 13px sans-serif;cursor:pointer;'
    + 'box-shadow:0 2px 8px rgba(0,0,0,.3)';
  document.body.appendChild(btn);

  function biggestVideo() {
    var best = null, bestArea = 0;
    document.querySelectorAll('video').forEach(function (v) {
      var r = v.getBoundingClientRect();
      var area = r.width * r.height;
      if (area > bestArea && v.readyState > 0) {
        best = v; bestArea = area;
      }
    });
    return best;
  }

  btn.addEventListener('click', function () {
    if (document.pictureInPictureElement) {
      document.exitPictureInPicture();
      return;
    }
    var v = biggestVideo();
    if (!v) { return; }
    v.requestPictureInPicture().catch(function (err) {
      btn.textContent = 'Brak PiP';
      setTimeout(function () { btn.textContent = 'PiP'; }, 1500);
    });
  });
})();

Ten sam przycisk przełącza: jeśli film jest już w PiP, wywołuje exitPictureInPicture(). Sprawdzenie readyState > 0 pomija filmy, które nie załadowały jeszcze metadanych, bo API je odrzuca.

Kliknij dwukrotnie dowolny film, aby go wyrzucić

Jeśli wolisz brak przycisku na ekranie, przypisz działanie wprost do filmów. Ta reguła sprawia, że dwukrotne kliknięcie samego filmu przełącza PiP.

document.addEventListener('dblclick', function (e) {
  var v = e.target;
  if (!v || v.tagName !== 'VIDEO') { return; }
  if (!document.pictureInPictureEnabled) { return; }
  e.preventDefault();
  if (document.pictureInPictureElement === v) {
    document.exitPictureInPicture();
  } else {
    v.requestPictureInPicture().catch(function () {});
  }
}, true);

Ponieważ nasłuchiwacz używa przechwytywania, działa przed własną procedurą obsługi dwukliku strony, a preventDefault() powstrzymuje odtwarzacz przed jednoczesnym przełączeniem trybu pełnoekranowego.

Reagowanie na zdarzenia PiP

Możesz utrzymać swoje UI w synchronizacji, nasłuchując enterpictureinpicture i leavepictureinpicture na filmie:

document.addEventListener('enterpictureinpicture', function (e) {
  console.log('plywa:', e.target.currentSrc);
}, true);

Wskazówki dla niezawodnego zachowania

• PiP potrzebuje bezpiecznego kontekstu. Działa na stronach https i odrzuca na zwykłym http.
• Jeśli strona ustawia disablePictureInPicture na elemencie, najpierw to wyczyść przez video.disablePictureInPicture = false.
• Niektóre strony jednostronicowe podmieniają element wideo przy nawigacji, więc trzymaj regułę przycisku aktywną dla całej strony zamiast per podstrona.

Zdobądź spakowaną wersję z naszych gotowych przykładów lub pobierz JustZix, aby dodać ją samodzielnie. Aby powstrzymać filmy przed automatycznym odtwarzaniem w pierwszej kolejności, przeczytaj zatrzymaj autoodtwarzanie wideo i audio.