如何将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并在视频播放器上播放

更多代码参考：click here

期待以下问题的答案：

1.如何在网页上获取api数据

2.转换成URL，在videoplayer上传递播放

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.
• If您从web服务器的根目录提供/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/的内容，则您的URL将类似于https://foo.bar/Fraction_webapp/FastAPI-RedisDB/videos/video19.mp4.
• If您从web服务器的mycoolvideosohyeah子目录提供/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/的内容，则您的URL将类似于URL

一旦您选择了如何托管视频，并且已经托管了它们，那么生成的URL(例如，https://foo.bar/mycoolvideosohyeah/video19.mp4)应该可以在任何视频播放器中使用，无论是您正在使用的React视频播放器，还是标准HTML标记的src属性，或者任何独立的视频播放软件。只要你继续托管视频，它们就应该一直可用。