有没有办法打开HTML卡在图片到图片模式(为PC)[重复]

ovfsdjhp 于 2023-05-12 发布在其他

关注(0)|答案(2)|浏览(94)

此问题已在此处有答案：

Is it possible to use PIP mode which is not for videos?（1个答案）
4天前关闭。
我有一个视频和音频文件的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模式

Html

来源：https://stackoverflow.com/questions/56483274/is-there-a-way-to-open-html-cards-in-picture-to-picture-mode-for-pc

2条答案

按热度按时间

xe55xuns1#

画中画功能仅适用于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类。

赞(0）回复(0）举报 2023-05-12

afdcj2ne2#

试试用这个

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>

赞(0）回复(0）举报 2023-05-12

我来回答

有没有办法打开HTML卡在图片到图片模式(为PC)[重复]

2条答案

相关问题

热门标签

最新问答