0
157
ViewsBotón de reproducción al hacer clic en el reproductor de video en reaccionar js
llame a la API usando fetch y obtener respuesta en la consola y asigne valores al encabezado de la tabla. después de eso, crea un botón en reaccionar js. Cada botón tiene una URL de video que se obtiene de la respuesta de la API
respuesta 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" Almacené esta respuesta en useState y pasé esta respuesta de usestate a la fuente del reproductor de video
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> El código anterior muestra asignar video_name al encabezado de Actions y luego creé un botón. cuando hago clic en un botón, todos los videos se abren en una ventana y reproducen todos los videos. Pero lo quiero para que solo se muestre ese video en el que se hizo clic.
<DialogContent> {response.map(({ Video_Name }) => ( <iframe width="420" height="315" title="videos" src={Video_Name} /> ))} </DialogContent>Cómo resolver este problema usando ganchos de reacción.
para más detalles y referencia de código
cómo crear un índice para video y pasar videos a la fuente del reproductor de video. cuando hago clic en ese botón, se muestra cierto video en el que se hizo clic.
Gracias
1 answers
Answer question0
El objeto de estado de response contiene la respuesta completa de la API. <DialogContent> mapea sobre esto y crea múltiples elementos iframe . No necesitamos mapear y crear múltiples iframes -
<DialogContent> {response.map(({ Video_Name }) => ( ...En su lugar, cree contenido de diálogo basado en el nombre del video donde se hizo clic en la fila.
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> 
Salida : haga clic en el botón de reproducción de cualquier fila. El resultado es esa URL de video de filas. Ahora puede usar esto para reproducir el video real.