reactjs - React/JSX/NextJS 中有没有办法在单击 gif 时自动全屏打开视频？

Question

用例：我有一个客户希望在他们的主页上显示一个视频的 gif 版本，单击该视频会打开一个全屏视频播放器。我该如何管理？我一直在 NextJS 框架中构建网站。

我想做这样的事情，但不是自动播放 mp4，而是自动循环播放视频的 gif，然后单击 gif，全屏播放 mp4。

任何帮助将不胜感激 - 我从来没有真正搞砸过 React 中的视频。

Answer 1

我会创建一个反应状态并将其设置为 false 然后 onClick 的 gif 我会将状态更新为 true 然后有一个条件语句在状态变为 true 时全屏显示视频

并在从全屏删除视频时将状态设置回 false

Answer 2

没有一种方法可以做到这一点，但 React 的美妙之处在于组件。你肯定会朝着正确的方向前进。我实际上会做两个独立的组件，一个用于背景，一个用于视频播放器。这是在代码中分离关注点的更清洁和良好的做法。

只需有条件地交换组件，就像在这个简化的例子中一样；

if(onclick) {
  render (
    <Player />
  ) else {
    <Index />
 }
}

您可以很好地使用状态来设置条件。React 中唯一的问题是组件在技术上不共享状态，但另一方面，“后台组件”只需要知道它是否在前台以及是否接收到 onClick 事件。video 组件只需要知道它自己的 onClick 就可以让它再次消失。因此，在这种非常特殊的情况下，两个单独的事件处理程序是没有问题的。