在反应js中播放按钮onclick视频播放器

Question

使用 fetch 调用 API 并在控制台中获得响应并将值分配给 table header。之后在 React js 中创建一个按钮。每个按钮都有一个视频 URL 是从 API response

API 回复：

Camera_Number:"Camera_1"
Group_Name: "Group_1"
Video_Name: "http://localhost:4000/video/0"

Camera_Number:"Camera_2"
Group_Name: "Group_2"
Video_Name: "http://localhost:4000/video/1"

我将此响应存储在 useState 中并将此使用状态响应传递给视频播放器源

  const actionButton = (params) => {
    setVideoName(params.videoName); // I am assuming but need to update videoName here
    setOpen(true);
  };
      headerName: "Actions",
          field: "Video_Name",
          cellRendererFramework: (params) => (
            <div>
              <Button
                variant="contained"
                onClick={() => actionButton(params)}
              >
                Play
              </Button>
            </div>

上面的代码显示将 video_name 分配给 Actions header 然后我创建了一个按钮。当我单击一个按钮时，所有视频都会在一个 window 中打开并播放所有视频。但我希望它只显示被点击的特定视频。

 <DialogContent>
            {response.map(({ Video_Name }) => (
              <iframe
                width="420"
                height="315"
                title="videos"
                src={Video_Name}
              />
            ))}
          </DialogContent>

如何使用 react-hooks 解决此问题。

了解更多详情和代码参考

https://github.com/iamharry-dev/modal_popup

如何为视频创建索引并将视频传递给视频播放器源。当我单击该按钮时，将显示被单击的某些视频。

谢谢

Answer 1

response 状态对象包含完整的 API 响应。 <DialogContent> 映射到此并创建 多个 iframe 元素。我们不需要映射和创建多个 iframe -

<DialogContent>
  {response.map(({ Video_Name }) => (
...

改为根据单击行的视频名称创建对话框内容。

const [videoName, setVideoName] = useState("");

function onCellClicked(params) {
    // maps to colId: "action" in columnDefs,
    if (params.column.colId === "action") {
      // set videoName for the row
      setVideoName(params.node.data.Video_Name);
      setOpen(true);
    }
}

// grid config
<AgGridReact
  ...
  rowData={response}
  onCellClicked={onCellClicked}>
</AgGridReact>

// access videoName in dialog content
<DialogContent>
 <div>{videoName}</div>
</DialogContent>

Output - 点击任意行的播放按钮。结果是视频行 url。您现在可以使用它来播放实际的视频。

在反应js中播放按钮onclick视频播放器

Play button onclick video player in react js

javascript

reactjs

react-hooks

use-effect

use-state