Aquí están los datos que obtuve de la API y su matriz.
0: "/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video13.mp4" 1: "/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video22.mp4" 2: "/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video6.mp4" 3: "/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video19.mp4" 4: "/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video9.mp4"ahora quiero convertir esto como URL de video y pasar a reaccionar reproductor de video
Mi código :
import React, { Component } from 'react' import axios from 'axios' import Video from './Video' class PostForm extends Component { constructor(props) { super(props) this.state = { key: '', // Where data will be saved. data: [], } console.log(this.state) } changeHandler = e => { this.setState({ [e.target.name]: e.target.value }) } submitHandler = e => { e.preventDefault() axios .get(`http://127.0.0.1:8000/hvals_hash?key=${this.state.key}`) .then(response => { // Updating the state to trigger a re-render this.setState({data: response.data}); console.log(response.data) }) .catch(error => { console.log(error) }) } render() { const { key } = this.state return ( <center><div> <form onSubmit={this.submitHandler}> <div> <h2> DATE PICKER</h2><br></br> <input type="text" name="key" value={key} onChange={this.changeHandler} /> </div> <br></br> <button type="submit">Submit</button> </form> <div> {this.state.data.map((videoURL) => <video src={videoURL}></video>)} </div> </div></center> ) } } export default PostFormCómo convertir este texto como URL y reproducirlo en un reproductor de video
Para más código de referencia: haga clic aquí
Esperando respuestas para:
1.Cómo obtener datos de API en la página web
2.Convertir en URL y pasar a reproducir en reproductor de video
/home/vinsent/ parece un directorio de usuarios en una computadora con Linux. Si está tratando de convertir eso en una URL que se puede usar en otra computadora, entonces deberá servir esos archivos con un servidor web.
La forma en que configure su servidor web determinará cómo se verán las URL correspondientes. Por ejemplo (asumiendo que su servidor web está en el dominio foo.bar ):
/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/ desde la raíz del servidor web, sus URL se verán como https://foo.bar/video19.mp4 ./home/vinsent/Videos/ desde la raíz del servidor web, sus URL se verán como https://foo.bar/Fraction_webapp/FastAPI-RedisDB/videos/video19.mp4 ./home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/ desde el subdirectorio mycoolvideosohyeah del servidor web, sus URL se verán como https://foo.bar/mycoolvideosohyeah/video19.mp4 . Una vez que haya elegido cómo alojar los videos y los haya alojado, las direcciones URL resultantes (por ejemplo, https://foo.bar/mycoolvideosohyeah/video19.mp4 ) deberían poder usarse en cualquier reproductor de video, ya sea este El reproductor de video React que está utilizando, o el atributo src de una etiqueta de video HTML estándar, o cualquier software de reproducción de video independiente. Deben seguir siendo utilizables mientras continúe alojando los videos.