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

Question

我有一个视频和音频文件的PIP代码... 我只是想知道有没有办法在 PIP 模式下打开 HTML 内容，如卡片/图片 这是我的视频文件的画中画...

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内容，例如卡片/图片

Answer 1

画中画仅适用于 Chrome(在任何其他浏览器中都不起作用)，并且特定于视频元素。它不是其他任何东西或其他任何地方的模式。但是对于 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>

如果要通过单击将其打开/关闭，则可以根据需要使用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>