如何创建一个带有API响应的react视频播放器

Question

这是React视频播放器的代码，使用本地存储视频来创建React播放器

放像机:

import React from 'react';
import VideoPlayer from 'react-video-js-player';
import ban1 from './video/ban1.mp4'
const VideoJS = () => {
const videoSrc = ban1;
const poster = "https://unsplash.com/photos/ZRns2R5azu0"
return (
<div className="App">
<h1> Fraction Video player</h1>
<center><VideoPlayer src={videoSrc} poster={poster} width="720" /></center>
</div>
);
};
export default VideoJS;

之后，我创建了一些表单和发布date，向API发送请求，并从API获得响应，

["/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video7.mp4", "/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/video19.mp4"]

现在如何将这个传递给react video player作为动态URL的

API CALL CODE:

import React, { Component } from 'react'
import axios from 'axios'
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) => {
return (
<div>
<br></br>
{
<table>
<ol>

{videoURL}
</ol>
</table>
}
</div>
);
})}
</div>

</div></center>
)
}
}
export default PostForm

期望答案:

1. 如何将动态URL传递给视频播放器

2. 如何将本地视频路径传递给react视频播放器

Answer 1

你可以用你想要的方式在视频或媒体中使用反应播放器包。它还支持动态URL。

如果你将视频路径存储在一个状态中，而不是const;你可以很容易地处理动态URL。

const [videoUrl, setVideoUrl] = useState('insertvideourlhere')