Reactjs 如何解决react video js player无法加载媒体的问题

您好，我正在尝试使用react video js播放器，但出现以下错误：

无法加载媒体，可能是因为服务器或网络出现故障，或者是因为不支持该格式。

起初，我认为可能是视频类型，因为最初它是一个.mkvi视频，然后我改为mp4，但仍然没有任何结果。我收到了相同的错误。我可以寻求帮助吗

下面的代码：VideoList.js

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


const VideoList = (props) =>{

    let videos = props.listVideos
    return(

        <div>
            {videos.map(video =>{
                return(

                    <div key={video.id}>
                        <h3>{video.lecturer}</h3>
                        <VideoPlayer src={video.video} width="720" height="420" playbackRates={[0.5, 1, 3.85, 16]}/>
                    

                    </div>

                )
            })}

        </div>
    )
}

export default VideoList

从“React”导入React；
从“react video js player”导入视频播放器；
const VideoList=（道具）=>{
让视频=道具。列表视频
返回(
{videos.map（视频=>{
返回(
{视频。讲师}
)
})}
)
}
导出默认视频列表

因此我设法找到了这背后的问题，因此我从API获取数据，但当我试图访问视频时，API没有给出完整的URL，即：

http://127.0.0.1:8000/media/lectures/

但是API给了我一个相对的路径

媒体/讲座/

所以我必须给剩下的URL，当我在视频中呈现时，API没有给它，也就是说，我必须写以下内容

---

正如我在评论中所说，如果视频不存在，编码、文件扩展名等有问题，通常会发生此错误。请参阅我所写的

最后，我是正确的，
video.video
对象返回的是相对路径，而不是绝对路径，这导致了不正确的链接

关于此问题的解决方案，这不是一个理想的体系结构，因为当您部署到生产、交换机域甚至交换机端口时，它可能会失败。连接您的基本url是可以的（例如，
http://127.0.0.1:8000/
）但我会将此变量作为唯一的真实来源，可能位于最顶层组件的某个状态，或者作为，或者，你可以简单地改变这个变量，你就不需要逐个检查所有的组件了


基于类的组件的示例实现：

父组件：

state = {
    base_url: `http://127.0.0.1:8000/api/`, // local dev api
    // base_url: `https://production-server:80/api/` // live site api

    // or an environment variable as described on my answer
}

<VideoPlayer src={`${this.props.base_url}${content.video}`}

子组件：

state = {
    base_url: `http://127.0.0.1:8000/api/`, // local dev api
    // base_url: `https://production-server:80/api/` // live site api

    // or an environment variable as described on my answer
}

<VideoPlayer src={`${this.props.base_url}${content.video}`}

你能提供相关视频的链接吗？我正在从Django Api那里再次抓取视频，你能提供相关视频的链接吗？通常，如果视频不存在，存在编码、文件扩展名等问题，就会发生此错误。请参阅我写的。我的猜测是
video.video
没有包含到该视频的正确链接。