如何将api响应数据传递给视频播放器

Question

这是我从API和它的数组得到的数据。

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"

现在我想将其转换为视频URl并传递给react视频播放器

我的代码:

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 PostForm

如何将此文本转换为URl并在视频播放器上播放

更多代码参考:点击这里

等待答案:

1。如何在网页

上获取api数据2。转换为URL，并传递到视频播放器上播放

Answer 1

/home/vinsent/看起来像Linux计算机上的用户目录。如果你想把它转换成一个可以在其他电脑上使用的URL，那么你需要一个web服务器来提供这些文件。

你如何设置你的web服务器将决定相应的url看起来像什么。例如(假设您的web服务器在域foo.bar上):

• 如果您从web服务器的根服务器提供/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/的内容，那么您的url将看起来像https://foo.bar/video19.mp4。
• 如果你从web服务器的根目录提供/home/vinsent/Videos/的内容，那么你的url将看起来像https://foo.bar/Fraction_webapp/FastAPI-RedisDB/videos/video19.mp4。
• 如果您从web服务器的mycoolvideosohyeah子目录提供/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/的内容，那么您的url将看起来像https://foo.bar/mycoolvideosohyeah/video19.mp4。

一旦你选择了如何托管视频，并且你已经托管了它们，结果url(例如，https://foo.bar/mycoolvideosohyeah/video19.mp4)应该可以在任何视频播放器中使用，无论是你正在使用的这个React视频播放器，还是标准的HTMLvideo标签的src属性，或任何独立的视频播放软件。他们应该保持可用,只要你继续主持视频。