ReactPlayer如何开启画中画模式？答案

【问题标题】：How to enable picture-in-picture mode in ReactPlayer?ReactPlayer如何开启画中画模式？
【发布时间】：2022-12-16 06:01:32
【问题描述】：

我是 reactjs 的新手。在这里，我试图添加一个画中画进入模式反应播放器.我已经搜索过，我找到了npm 安装 react-use-pip包，我单独运行这个包的下面的示例代码，它工作正常。但是，当我将此代码插入到我的项目代码中时，它无法正常工作并且出现错误。

错误：未捕获的类型错误：无法读取未定义的属性（读取“toLocaleLowerCase”）

我还有疑问，请澄清

此包是否仅适用于视频组件？
我们可以使用这个包吗反应播放器？
如果我们可以通过ReactPlayer方式使用这个包，那么这个错误是什么意思，为什么会出现？

是否有另一种添加画中画的方法，是否有任何其他软件包可以添加它？

包裹名字:npm 安装 react-use-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}
/>

【问题讨论】：

pip 标签是 python 包管理器。我确定你想要picture-in-picture。请务必阅读首字母缩略词的标签说明

标签： reactjs react-player picture-in-picture

【解决方案1】：

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

像这样：

const Player = () => {
  const [pipMode, setPipMode] = useState(false);

  const togglePIP = () => {
    setPipMode(!pipMode);
  };

  return (
    <div>
      <ReactPlayer
        url="http://commondatastorage.googleapis.com/gtv-videos-bucket/big_buck_bunny_1080p.mp4"
        width={width}
        height={height}
        pip={pipMode}
      />
      <button onClick={togglePIP}>Toggle PIP</button>
    </div>
  );
};

不需要 react-use-pip

【讨论】：