有没有办法在图片到图片模式下打开HTML卡(适用于PC)

Question

我有一个视频和音频文件的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>

​

使用相同的脚本

实际上，我需要帮助打开HTML内容，如卡片/图片在PIP模式

Answer 1

画中画仅适用于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;
}

<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>

​

如果想要通过单击来打开/关闭它，可以根据需要使用element.classList.add('pip')和element.classList.remove('pip')在元素中添加或删除pip类。

Answer 2

试着使用这个

​

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>

​