CSS - 伪类 :picture-in-picture

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>

打印本页