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

Posted 2023-03-07

【中文标题】如何将 api 响应数据传递给视频播放器

【英文标题】：How to pass api response data to video player

【发布时间】：2021-11-30 20:06:06

【问题描述】：

这是我从 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 并传递给反应视频播放器

我的代码：

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上播放

【参考方案1】：

/home/vinsent/ 看起来像 Linux 计算机上的用户目录。如果您尝试将其转换为可在其他计算机上使用的 URL，则需要通过网络服务器提供这些文件。

您如何设置网络服务器将决定相应 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。 如果您从网络服务器的mycoolvideosohyeah 子目录中提供/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos/ 的内容，那么您的网址将类似于https://foo.bar/mycoolvideosohyeah/video19.mp4。

一旦您选择了如何托管视频并托管了它们，生成的 URL（例如，https://foo.bar/mycoolvideosohyeah/video19.mp4）应该可以在任何视频播放器中使用，无论您使用的是这个 React 视频播放器使用标准 html video 标签的 src 属性，或任何独立的视频播放软件。只要您继续托管视频，它们就应该一直可用。