当前位置：首页 > React

前端画中画如何实现react

2026-01-25 23:18:01React

实现 React 中的画中画功能

使用浏览器内置的 Picture-in-Picture (PiP) API 可以在 React 中实现画中画功能。以下是一个完整的实现方法：

检查浏览器支持

在尝试使用 PiP API 之前，需要检查浏览器是否支持该功能：

const isPiPSupported = 'pictureInPictureEnabled' in document;

创建视频组件

创建一个基本的视频组件，包含画中画切换按钮：

前端画中画如何实现react

import React, { useRef, useState } from 'react';

const PiPVideo = ({ src }) => {
  const videoRef = useRef(null);
  const [isPiPActive, setIsPiPActive] = useState(false);

  const togglePiP = async () => {
    if (!videoRef.current) return;

    try {
      if (document.pictureInPictureElement) {
        await document.exitPictureInPicture();
      } else {
        await videoRef.current.requestPictureInPicture();
      }
    } catch (error) {
      console.error('PiP error:', error);
    }
  };

  return (
    <div>
      <video
        ref={videoRef}
        src={src}
        controls
        onEnterPictureInPicture={() => setIsPiPActive(true)}
        onLeavePictureInPicture={() => setIsPiPActive(false)}
      />
      <button onClick={togglePiP} disabled={!isPiPSupported}>
        {isPiPActive ? '退出画中画' : '进入画中画'}
      </button>
    </div>
  );
};

处理 PiP 事件

监听画中画状态变化：

useEffect(() => {
  const video = videoRef.current;
  if (!video) return;

  const handleEnter = () => setIsPiPActive(true);
  const handleLeave = () => setIsPiPActive(false);

  video.addEventListener('enterpictureinpicture', handleEnter);
  video.addEventListener('leavepictureinpicture', handleLeave);

  return () => {
    video.removeEventListener('enterpictureinpicture', handleEnter);
    video.removeEventListener('leavepictureinpicture', handleLeave);
  };
}, []);

自定义画中画控制器

如果需要自定义画中画窗口中的控制器：

前端画中画如何实现react

const setupPiPControls = async () => {
  if (!videoRef.current) return;

  const pipWindow = await videoRef.current.requestPictureInPicture();

  pipWindow.addEventListener('resize', (event) => {
    const { width, height } = event.target;
    console.log(`PiP窗口大小: ${width}x${height}`);
  });
};

处理多视频场景

当页面有多个视频时，确保只有一个进入画中画：

const handlePiPToggle = async () => {
  if (document.pictureInPictureElement) {
    await document.exitPictureInPicture();
  } else {
    await videoRef.current.requestPictureInPicture();
  }
};

样式优化

为画中画按钮添加样式反馈：

.pip-button {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.pip-button:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

完整示例组件

import React, { useRef, useState, useEffect } from 'react';

const PiPPlayer = ({ src }) => {
  const videoRef = useRef(null);
  const [isPiPActive, setIsPiPActive] = useState(false);
  const isPiPSupported = 'pictureInPictureEnabled' in document;

  const togglePiP = async () => {
    if (!videoRef.current) return;

    try {
      if (document.pictureInPictureElement) {
        await document.exitPictureInPicture();
      } else {
        await videoRef.current.requestPictureInPicture();
      }
    } catch (error) {
      console.error('PiP error:', error);
    }
  };

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    const handleEnter = () => setIsPiPActive(true);
    const handleLeave = () => setIsPiPActive(false);

    video.addEventListener('enterpictureinpicture', handleEnter);
    video.addEventListener('leavepictureinpicture', handleLeave);

    return () => {
      video.removeEventListener('enterpictureinpicture', handleEnter);
      video.removeEventListener('leavepictureinpicture', handleLeave);
    };
  }, []);

  return (
    <div className="pip-container">
      <video
        ref={videoRef}
        src={src}
        controls
        width="100%"
      />
      <button 
        className="pip-button" 
        onClick={togglePiP} 
        disabled={!isPiPSupported}
      >
        {isPiPActive ? '退出画中画' : '进入画中画'}
      </button>
      {!isPiPSupported && (
        <p>您的浏览器不支持画中画功能</p>
      )}
    </div>
  );
};