javascript - 有没有办法在图片到图片模式下打开 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>

使用相同的脚本

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

标签： javascripthtmlpicture-in-picture

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