在用户点击缩略图后，保持反应播放器灯光模式

Question

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

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

有没有办法让ReactPlayer始终处于缩略图模式，而不考虑用户交互？

Answer 1

我也遇到过类似的问题，这就是我将其保存在"轻"；模式

• 使用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，该useEffect在任何时候都会调用ref.current.showPreview()；"轻"；模式

// This will make the player go back to "light" mode
React.useEffect(() => {

if (playerRef) {
playerRef.current.showPreview();
}

}, [index]);

如果你想查看，我还做了一个CodeSandbox