2

私はビデオとオーディオ ファイルの PIP コードを持っています... PIP モードでカード/画像のような HTML コンテンツを開く方法はありますか? ビデオ ファイルの 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>

同じスクリプトで

実は、PIP モードでカード/写真のような HTML コンテンツを開くには助けが必要です

4

2 に答える 2

1

ピクチャー イン ピクチャーは Chrome にのみ固有であり (他のブラウザーでは機能しません)、Video 要素に固有です。それは他の何かのためのモードではありません。position: fixedただし、HTML 要素の場合は、CSSプロパティを使用して同じ効果を得ることができます。

例えば：

.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;
}
<div class='pip'>This is a Picture-in-Picture-like element.</div>
<pre>Some
large
text
to
make
the
window
scroll
so
you
can
see
the
Picture-
in-
Picture
will
remain
in
the
same
spot.</pre>

クリックでオン/オフを切り替えたい場合は、 と を使用して、必要に応じて要素から pip クラスを追加または削除できelement.classList.add('pip')ますelement.classList.remove('pip')。

于 2019-06-06T19:42:56.427 に答える