如何在ReactPlayer中启用画中画模式

Question

我是reactjs的新手。在这里，我试图在ReactPlayer中添加画中画模式。我搜索过并找到了npm install-react-use-pip包，我单独运行了该包的以下示例代码，它运行得很好。但是，当我将此代码插入到我的项目代码中时，它不起作用，并通过了一个错误。

错误：未捕获类型错误：无法读取未定义的属性(读取"toLocaleLowerCase"(

我还有疑问，请澄清

1. 这个包只适用于视频组件吗
2. 我们可以将此包与ReactPlayer一起使用吗
3. 如果我们可以将这个包与ReactPlayer一起使用，那么错误的含义是什么？为什么会出现错误
4. 有没有其他方法可以在图片中添加图片？有没有其他包可以添加它

程序包名称：npm安装反应使用pip

示例代码：

import usePictureInPicture from 'react-use-pip'
function VideoPlayer() {
const videoRef = useRef(null)
const {
isPictureInPictureActive,
isPictureInPictureAvailable,
togglePictureInPicture,
} = usePictureInPicture(videoRef)
return(
<div className="App">
<video ref={videoRef} autoPlay muted controls loop width="100%">
<source src="video-sample.mp4" />
</video>
{isPictureInPictureAvailable && (
<button
onClick={() => togglePictureInPicture(!isPictureInPictureActive)}
>
{isPictureInPictureActive ? 'Disable' : 'Enable'} Picture in Picture
</button>
)}
</div>
)
}

我正在使用ReactPlayer组件。这里，playerRef是参考变量

<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/big_buck_bunny_1080p.mp4"
width={width}
height={height}
ref={playerRef}
/>

Answer 1

react玩家有一个pip道具。如果将pip更改为true，视频将进入画中画模式。

类似这样的东西：

const Player = () => {
const [pipMode, setPipMode] = useState(false);
const enablePip = () => {
setPipMode(true);
};
return (
<div>
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/big_buck_bunny_1080p.mp4"
width={width}
height={height}
pip={pipMode}
/>
<button onClick={EnablePip}>Toggle PIP</button>
</div>
);
};

无需反应使用pip