javascript - 如何使用 API 响应创建反应视频播放器

问题描述

这里是 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"]

现在如何将它作为动态 URL 传递给视频播放器

API调用代码：

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

预期答案：

如何将动态 URL 传递给视频播放器
如何通过本地视频路径反应视频播放器

标签： javascriptnode.jsreactjsapiaxios

javascript - 如何使用 API 响应创建反应视频播放器

问题描述

解决方案

推荐阅读