CSS 伪类

CSS 伪类 :picture-in-picture 将视频弹出到一个小浮动窗口中，该窗口位于所有其他窗口之上，以便他们可以在做其他事情的同时继续观看。

语法

:picture-in-picture {
   /* ... */
}
:picture-in-picture 伪类不受 Firefox 和 Safari 浏览器支持。

CSS :picture-in-picture 示例

以下示例演示如何启用 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="/css/oceans.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>
      //获取HTML元素的引用
      const videoInPIP = document.getElementById('boat_video');
      const pipToggle = document.getElementById('pipToggle');
      const pipStatus = document.getElementById('pipStatus');

      // 如果支持 PIP，则从 PIP 切换和状态元素中删除"隐藏"类
      if ('pictureInPictureEnabled' in document) {
         pipToggle.classList.remove('hidden');          // 显示切换
         pipToggle.disabled = false;                    //启用切换
         pipStatus.classList.remove('hidden');          //显示状态

      //向PIP切换复选框添加事件监听器以处理PIP模式切换
      pipToggle.addEventListener('change', switchToPIP);
      }

      //画中画模式和普通模式切换函数
      function switchToPIP() {                   //当用户切换 PIP 复选框时将调用此函数
         //改变画中画状态的函数
         function changePictureInPictureState() {               
            if (document.pictureInPictureElement) {              //检查文档是否已经处于PIP模式
               document.exitPictureInPicture().catch(() => {});  //是，退出PIP模式
            } else {
               videoInPIP.requestPictureInPicture().catch(() => {});  //如果不是，则请求视频元素的PIP模式
            }
         }

         changePictureInPictureState(); //调用函数改变状态
      }

         // 用于检测视频何时进入 PIP 模式的事件侦听器
      videoInPIP.addEventListener('enterpictureinpicture', () => {
         pipStatus.textContent = 'On';   // 将 PIP 状态文本更新为"打开"
      })

      // 用于检测视频何时离开 PIP 模式的事件侦听器
      videoInPIP.addEventListener('leavepictureinpicture', () => {
         pipStatus.textContent = 'Off';    // 将 PIP 状态文本更新为"关闭"
      });
   </script>
</body>
</html>