Есть ли способ открыть HTML-карты в режиме Picture to Picture (для ПК) - PullRequest
Новая
       26

Есть ли способ открыть HTML-карты в режиме Picture to Picture (для ПК)

2 голосов
/ 06 июня 2019

У меня есть PIP-код для видео и аудио файлов ... Мне просто интересно, есть ли способ открыть контент HTML, как карта / картинка в режиме PIP вот мой файл PIP для видео ... 

const video = document.getElementById('myVideo');
      const togglePipButton = document.getElementById('togglePipButton');
    
      // Hide button if Picture-in-Picture is not supported or disabled.
      togglePipButton.hidden = !document.pictureInPictureEnabled ||
        video.disablePictureInPicture;
    
      togglePipButton.addEventListener('click', function() {
        // If there is no element in Picture-in-Picture yet, let’s request
        // Picture-in-Picture for the video, otherwise leave it.
        if (!document.pictureInPictureElement) {
          video.requestPictureInPicture()
          .catch(error => {
            // Video failed to enter Picture-in-Picture mode.
          });
        } else {
          document.exitPictureInPicture()
          .catch(error => {
            // Video failed to leave Picture-in-Picture mode.
          });
        }
      });
    <video id="myVideo" controls="" playsinline="" src="https://storage.googleapis.com/media-session/caminandes/short.mp4" poster="https://storage.googleapis.com/media-session/caminandes/artwork-512.png"></video>
    <button id="togglePipButton">tyui</button>

и я натолкнулся на следующее ... 

<div class="content" id="myVideo"><img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="Lights"></div>
    <button id="togglePipButton">tyui</button>

с тем же сценарием

На самом деле, мне нужна помощь, чтобы открыть HTML-контент, такой как карта / картинка в режиме PIP

1 Ответ

1 голос
/ 06 июня 2019

Картинка в картинке относится только к Chrome (она не работает в любом другом браузере) и к элементам видео.Это не режим для чего-либо еще или где-либо еще.Но для элементов HTML вы можете получить тот же эффект, используя свойство CSS position: fixed.

Например: 

.pip {
  position: fixed;
  right: 4px;
  bottom: 4px;
  border: 1px solid #000000;
  padding: 4px;
}

/* Below is just for demo; it's only the above that's relevant. */
pre {
  font-size: 20pt;
}
This is a Picture-in-Picture-like element.
Some
large
text
to
make
the
window
scroll
so
you
can
see
the
Picture-
in-
Picture
will
remain
in
the
same
spot.

Если вы хотите включить / выключить его одним щелчком мыши, вы можете добавить или удалить класс pip из элемента по мере необходимости, используя element.classList.add('pip') и element.classList.remove('pip').

...