CSS 伪类 :picture-in-picture 将视频弹出到一个小浮动窗口中，该窗口保持在所有其他窗口之上，这样他们就可以在做其他事情时继续观看。
语法
:picture-in-picture {
/* ... */
}
Firefox 和 Safari 浏览器不支持伪类 :picture-in-picture。
CSS 伪类 :picture-in-picture示例
以下示例演示了如何为视频元素启用画中画 （PiP） 模式，并允许用户使用复选框输入将其打开和关闭 -
<html>
<head>
<style>
video {
max-width: 50%;
border: 1px solid;
}
.container {
display: flex;
align-items: center;
margin-top: 20px;
}
.heading {
margin-right: 10px;
}
.hidden {
display: none;
}
:picture-in-picture {
border: 3px solid red;
}
</style>
</head>
<body>
<video id="boat_video" controls src="images/boat_video.mp4"></video>
<div class="container">
<label class="heading">Picture-in-Picture Mode:</label> <!-- Label for the Picture-in-Picture mode -->
<input type="checkbox" id="pipToggle" class="hidden"> <!-- Checkbox input for toggling Picture-in-Picture mode -->
<span id="pipStatus" class="hidden">Off</span> <!-- Display the Picture-in-Picture status (initially hidden) -->
</div>
<script>
// Get references to HTML elements
const videoInPIP = document.getElementById('boat_video');
const pipToggle = document.getElementById('pipToggle');
const pipStatus = document.getElementById('pipStatus');
// If PIP is supported, remove the 'hidden' class from the PIP toggle and status elements
if ('pictureInPictureEnabled' in document) {
pipToggle.classList.remove('hidden'); // Show the toggle
pipToggle.disabled = false; // Enable the toggle
pipStatus.classList.remove('hidden'); // Show the status
// Add an event listener to the PIP toggle checkbox to handle PIP mode switching
pipToggle.addEventListener('change', switchToPIP);
}
// Function to switch between Picture-in-Picture mode and normal mode
function switchToPIP() { // This function will be called when the user toggles the PIP checkbox
// Function to change the Picture-in-Picture state
function changePictureInPictureState() {
if (document.pictureInPictureElement) { // Check if the document is already in PIP mode
document.exitPictureInPicture().catch(() => {}); // it is, exit PIP mode
} else {
videoInPIP.requestPictureInPicture().catch(() => {}); // If it's not, request PIP mode for the video element
}
}
changePictureInPictureState(); // Call the function to change the state
}
// Event listener to detect when the video enters PIP mode
videoInPIP.addEventListener('enterpictureinpicture', () => {
pipStatus.textContent = 'On'; // Update the PIP status text to 'On'
})
// Event listener to detect when the video leaves PIP mode
videoInPIP.addEventListener('leavepictureinpicture', () => {
pipStatus.textContent = 'Off'; // Update the PIP status text to 'Off'
});
</script>
</body>
</html>
