Redis存储本地视频路径经API返回后如何在React中接入react video player播放

1 实现本地视频可通过URL访问 #

你当前在Redis中存储的是视频的相对路径，需要先将视频所在目录配置为静态资源服务，才能通过HTTP URL访问：
如果你使用Fastapi作为后端服务，直接在Fastapi入口文件添加静态资源路由配置即可：

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()
# 将本地videos目录挂载为静态资源路由，前缀为/videos
app.mount("/videos", StaticFiles(directory="videos"), name="videos")

配置完成后，你从Redis取出的相对路径拼接后端服务前缀，就是可直接访问的视频URL，示例：
http://127.0.0.1:8000/videos/Fastapi/video1.mp4

如果你的视频存放在React项目的public目录下，直接将视频放入public/videos/Fastapi/路径下，可直接使用/videos/Fastapi/xxx.mp4作为访问路径，无需额外配置后端。

2 接入react video player实现动态播放 #

首先安装依赖包：

npm install video-react

然后修改你的React组件代码，新增当前播放视频的状态字段、点击播放逻辑、播放器渲染逻辑，修改后的完整代码如下：

import React, { Component } from 'react'
import axios from 'axios'
// 引入video-react相关组件和样式
import { Player } from 'video-react'
import 'video-react/dist/video-react.css'

class PostForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            key: '10-10-21',
            data: [],
            // 新增字段存储当前播放的视频地址
            currentVideoUrl: ''
        }
    }

    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 => {
            this.setState({data: response.data});
        })
        .catch(error => {
            console.log(error)
        })
    }

    // 新增点击播放方法，拼接完整视频URL并更新状态
    handlePlay = (videoPath) => {
        const fullUrl = `http://127.0.0.1:8000/${videoPath}`
        // 如果视频存在React public目录下，上面的fullUrl替换为 `/${videoPath}` 即可
        this.setState({ currentVideoUrl: fullUrl })
    }

    render() {
        const { key, currentVideoUrl } = this.state
        return (
            <center><div>
                <form onSubmit={this.submitHandler}>
                    <div>
                        <h2> 日期选择器</h2><br></br>
                        <input
                            type="text"
                            name="key"
                            value={key}
                            onChange={this.changeHandler}
                        />
                    </div>
                    <br></br>
                    <button type="submit">提交</button>
                </form>
                <div>
                    {/* 存在播放地址时渲染播放器 */}
                    {currentVideoUrl && (
                        <div style={{width: '600px', margin: '20px auto'}}>
                            <Player>
                                <source src={currentVideoUrl} />
                            </Player>
                        </div>
                    )}
                    <table>
                        <br/>
                        <tr>
                            <th>视频</th>
                        </tr>
                        {this.state.data.map((videoPath, index) => {
                            return (
                                <tr key={index}>
                                    <td>
                                        <a href="javascript:void(0)" onClick={() => this.handlePlay(videoPath)}>
                                            {videoPath}
                                        </a>
                                    </td>
                                </tr>
                            );
                        })}
                    </table>
                </div>
            </div></center>
        )
    }
}
export default PostForm

完成以上修改后，点击对应视频路径即可自动加载播放器播放对应视频。

内容的提问来源于stack exchange，提问作者user16319883