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

尝试使用这个

const video = document.querySelectorAll('video')[0];
    const button = document.querySelector('button');
    
    
    if (!document.pictureInPictureEnabled) {
      button.textContent = 'PiP is not supported in your browser.';
      button.style.opacity = '0.5';
      button.style.cursor = 'default';
      button.disabled = true;
    }
    
    video.addEventListener('enterpictureinpicture', () => {
        button.textContent = 'Exit Picture-in-Picture';
    });
    
    video.addEventListener('leavepictureinpicture', () => {
        button.textContent = 'Enter Picture-in-Picture';
    });
    
    button.addEventListener('click', () => {
      if (document.pictureInPictureElement) {
        document.exitPictureInPicture()
      } else {
        video.requestPictureInPicture()
      }
    });
     html {
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
    }
     *, *:before, *:after {
         -webkit-box-sizing: inherit;
         -moz-box-sizing: inherit;
         box-sizing: inherit;
    }
     body {
         padding: 2rem;
         font-family: 'Inter UI', sans-serif;
         text-align: center;
         position: relative;
    }
     h1, h2 {
         margin-top: 0;
    }
     .wrapper {
         width: 100vw;
         height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         position: absolute;
         top: 0;
         left: 0;
    }
     video {
         margin-bottom: 32px;
    }
     .button {
         height: 40px;
         line-height: 40px;
         padding: 0 2rem;
         border-radius: 4px;
         background: #2b8dff;
         color: #fff;
         display: inline-block;
         font-size: 17px;
         font-weight: 500;
         border: none;
         outline: none;
         cursor: pointer;
    }
     .button-full {
         width: 100%;
    }
     
     <div class="wrapper">
      <video 
        src="https://www.w3schools.com/html/mov_bbb.mp4"
        controls
      ></video>
      
      <button type="button" class="button js-open">Enter Picture-in-Picture</button>
    </div>

于 2021-06-09T04:05:39.647 回答
1

画中画仅适用于 Chrome（它不适用于任何其他浏览器），并且特定于 Video 元素。这不是其他任何东西或其他任何地方的模式。但是对于 HTML 元素，您可以使用 CSSposition: 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;
}
<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 回答