3

我正在使用组件中的light={true}设置在ReactPlayer视频列表中显示缩略图。这在初始负载上运行良好。但是，当用户单击缩略图时，我会打开一个模式来播放视频（在一个单独的ReactPlayer组件中）。当用户关闭模式并返回列表时，他们点击的视频现在不再处于“缩略图模式”。

我尝试light: true在 MODAL_CLOSED 操作上从减速器传递一个参数，并且我可以成功地看到该值进入我的组件，但是将属性设置为该值对我的组件light的缩略图模式没有影响。ReactPlayer

ReactPlayer无论用户交互如何，有没有办法始终保持缩略图模式？

4

1 回答 1

2

我有一个类似的问题，这就是我将它保持在“轻”模式的方式

  • 使用 useRef 添加 ref
// Create a ref
const playerRef = React.useRef(null)
// Your video url
const yourUrl = "https://yourUrlHere..."

return (
  <ReactPlayer 
    ref={playerRef}
    light={true}
    url={yourUrl}
  />
):
  • 创建一个 useEffect 调用ref.current.showPreview()，只要有导致 ReactPlayer 离开“light”模式的更改
// This will make the player go back to "light" mode
  React.useEffect(() => {
    
    if (playerRef) {
      playerRef.current.showPreview();
    }
    
  }, [index]);

如果您想查看它，我还制作了一个CodeSandbox

于 2021-04-06T21:11:27.890 回答