respuesta API:
Array(80) 0: Camera_Number: "Camera_1" Company_Name: "Fraction Analytics Limited" Floor Number: "Ground_Floor" Group_Name: "Group_1" Video_Name: "http://localhost:4000/video/0" [[Prototype]]: Object 1: Camera_Number: "Camera_2" Company_Name: "Fraction Analytics Limited" Floor Number: "Ground_Floor" Group_Name: "Group_1" Video_Name: "http://localhost:4000/video/1" [[Prototype]]: Object
Aquí Video_Name: "http://localhost:4000/video/1"
estos son videos alojados en reacción.
App.js
llama a la API utilizando los resultados de obtención e impresión en la consola.
const onGridReady = (params) => { console.log("grid is ready"); fetch("http://localhost:8000/get_all") .then((resp) => resp.json()) .then((resp) => { console.log(resp.results); params.api.applyTransaction({ add: resp.results }); }); };
Ahora, cómo guardar la respuesta de la API en estado de uso y pasar el campo Video_Name
para reaccionar al reproductor de video
<iframe width="420" height="315" title="videos" src={"http://localhost:4000/video/0"} />
Aquí solo paso un video a la fuente, pero esperaba pasar varios videos a la fuente dinámicamente.
Cuando hago clic cada vez, debería reproducir un video diferente según la respuesta de API
Si tiene alguna consulta, puede consultar aquí el código.
Gracias
Simplemente puede pasar videos como matriz y seleccionar uno por índice, este índice se puede cambiar dinámicamente llamando
setState ({index_of_playing_video: índice de video})
<iframe width="420" height="315" title="videos" src={this.state.videos[this.state.index_of_playing_video]} />