如何创建支持API动态URL及本地路径的React视频播放器

1 动态URL传入视频播放器作为播放源 #

首先需要调整后端配置，你当前API返回的是服务器本地的绝对路径，前端浏览器无法直接访问该类路径：

1. FastAPI后端添加静态资源挂载配置，在服务入口文件添加如下代码：

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()
# 挂载视频存储目录为静态资源路径
app.mount("/static/videos", StaticFiles(directory="/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos"), name="videos")

2. 修改VideoJS组件，支持接收外部传入的视频源参数：

import React from 'react';
import VideoPlayer from 'react-video-js-player';

// 新增src参数接收外部传入的视频地址，poster可按需自行设置
const VideoJS = ({src, poster = ""}) => {
    return (
        <div className="App">
            <h1> Fraction Video player</h1>
            <center><VideoPlayer src={src} poster={poster} width="720" /></center>
        </div>
    );
};
export default VideoJS;

3. 在PostForm组件中拼接可用的静态资源URL，传入播放器即可：
   把原有render方法里的map遍历部分替换为以下代码：

{this.state.data.map((videoPath, index) => {
    // 从本地绝对路径提取文件名，拼接成前端可访问的静态资源URL
    const fileName = videoPath.split('/').pop()
    const videoURL = `http://127.0.0.1:8000/static/videos/${fileName}`
    return (
        <div key={index} style={{margin: '20px 0'}}>
            <VideoJS src={videoURL}/>
        </div>
    );
})}

2 本地视频路径传入React视频播放器作为播放源 #

分两种场景处理：

• 场景1：视频存放在React项目目录内
  直接和你初始代码的用法一致，用import导入视频文件即可，构建工具（Webpack/Vite）会自动处理路径映射，直接将导入结果传给播放器的src属性即可。
• 场景2：视频是用户本地设备上的文件
  浏览器出于安全限制，无法直接读取本地文件的绝对路径，需要通过文件选择框让用户主动选择视频文件，将文件转为Blob URL后传给播放器：
  示例代码：

import React, { useState } from 'react'
import VideoJS from './VideoJS'

const LocalVideoUpload = () => {
    const [videoSrc, setVideoSrc] = useState('')
    const handleFileChange = (e) => {
        const file = e.target.files[0]
        if (file) {
            const url = URL.createObjectURL(file)
            setVideoSrc(url)
        }
    }

    return (
        <div>
            <input type="file" accept="video/*" onChange={handleFileChange}/>
            {videoSrc && <VideoJS src={videoSrc}/>}
        </div>
    )
}

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