API介绍

HTMLVideoElement 接口提供的 requestPictureInPicture() 方法会发出异步请求，并以画中画的模式显示视频

浏览器兼容性

该方法不能保证视频进入画中画。如果授予了进入画中画的权限，则返回的 Promise 会兑现，且视频将收到一个 enterpictureinpicture 事件，来表示它现在处于画中画状态。

实现

该实现方法是基于react的写法

1. document.pictureInPictureEnabled
   1. Document 接口的 pictureInPictureEnabled 只读属性表示画中画模式是否可用。
   2. 除非权限策略另有指定，否则画中画模式默认是可用的。
   3. 尽管这个属性是只读的，但是即使它被修改（甚至是在严格模式下），也不会抛出错误；setter 是无操作的并且将会被忽略。
2. document.exitPictureInPicture
3. Document 接口的 exitPictureInPicture() 方法请求退出以画中画模式浮动在此文档中播放的视频，来恢复屏幕之前的状态。这通常与先前调用的 HTMLVideoElement.requestPictureInPicture() 相反。

const VideoComponent = (props: {src:string}) => { 
const videoRef = useRef<HTMLVideoElement>(null);
const canClick = useRef(true)
const btnText = useRef('进入')
const goToPip =  useCallback(() => {
  try {
    canClick.current = false
    if (videoRef.current !== document.pictureInPictureElement) {
      // 尝试进入画中画模式，不一定会成功
      videoRef.current?.requestPictureInPicture();      
    } else {
      // 退出画中画
      document.exitPictureInPicture();
    } 
  } catch(error) {
    console.log('&gt; 出错了！' + error);
  } finally {
    canClick.current = true;
  }
}, [])

useEffect(() => {
  videoRef.current?.addEventListener('enterpictureinpicture', function(event) {
    console.log('&gt; 视频已进入Picture-in-Picture模式');
    btnText.current = '退出';
  });
  // 退出画中画模式时候
  videoRef.current?.addEventListener('leavepictureinpicture', function(event) {
    console.log('&gt; 视频已退出Picture-in-Picture模式');
    btnText.current = '进入';
  });
 } ,[])
return <div>
  <video ref={videoRef} src={props.src} controls playsInline />
  <button onClick={goToPip}>{btnText.current}</button>
</div>
}

画中画开启.png

注：
:picture-in-picture 伪类允许你配置样式表，以便视频在画中画或者传统播放模式来回切换时自动调整内容的大小、样式或布局。