Javascript React-使用和加载视频文件

我在尝试编写一个程序时遇到了一个独特的问题。我正在用Symfony2编写一个后端restapi，它允许用户上传视频文件（mp4）。我有一个前端客户，我已经写了反应。我希望能够从选择列表中选择一个特定的视频文件，并通过道具将足够的信息传递给组件以加载视频

尝试加载视频时出现了一点问题，因为当我通过道具插入视频路径时，视频不会显示。只有控件可见，尽管它们已灰显。就好像找不到视频一样。这是目前我的React代码的一个示例

render(){
    const {details, index} = this.props;
    return(
        <li>
            <div id="theVideo">
                <video id="samp" width="640" height="480" controls>
                    <source src = {this.props.details.videoPath} type="video/mp4">
                        Your browser does not support this video format.
                    </source>
                </video>
            </div>
            {details.textOfSpeech}
        </li>
    );

render（）{
const{details，index}=this.props；
返回(

您的浏览器不支持此视频格式。
{details.textOfSpeech}

);

奇怪的是，如果我创建一个静态html文件并加载到路径中，就像它通过videoPath道具一样，视频就会显示，控件也会激活。就像这样

      <video id="samp" width="640" height="480" controls>
        <source src="/Users/thevideos/SideProjects/speechQuill/app/../web/uploads/227bd2a3eee545b251f9362e08b1debe.mp4" type="video/mp4">
        </source>
      </video>

我无法确定发生这种情况的确切原因。我可以通过在组件文件顶部插入导入语句的路径并将导入值插入源标记中来解决此问题

     import video from './prototype.mp4';
.
.
        <div>
        <video controls src={video} type="video/mp4"></video>

从“/prototype.mp4”导入视频；
.
.

这将在React中加载视频，但是，作为React的初学者，它违背了从我试图构建的程序功能的特定道具选择中加载视频的目的。我不明白为什么会发生这种情况。但是，如果我将URL插入src属性，则不会发生这种情况

我的symfony后端将文件加载到一个单独的目录中，以便客户端从中提取。这是我打算运行应用程序的方式，但我正在考虑更改上载过程，将其发送到Cloudinary或其他什么，以便我可以绕过此问题。不可避免地，我希望使用类似popcorn.js的东西，以便对上载的视频进行注释。仍然，我想了解为什么这会发生在React而不是静态html文件中，以及如何避免这个问题

---

任何洞察都将不胜感激。：-

您正在声明

const{details，index}=this.props；

要简写您的道具名称，因此不再需要使用this.props，只需使用

details

或

index

render(){
    const {details, index} = this.props;
    return(
        <li>
            <div id="theVideo">
                <video id="samp" width="640" height="480" controls>
                    <source src = {details.videoPath} type="video/mp4">
                        Your browser does not support this video format.
                    </source>
                </video>
            </div>
            {details.textOfSpeech}
        </li>
    );

render（）{
const{details，index}=this.props；
返回(

您的浏览器不支持此视频格式。
{details.textOfSpeech}

);

---

我希望它能工作=）

嗨，尤里，我希望我能从解构器中看到这一点。很好的捕获！：-）不幸的是，它仍然提供相同的效果。在组件渲染之前，您的道具详细信息道具可能会传递给组件（在完全渲染时使视频URL未定义）。使用React，如果源标记有任何子项，则会引发错误。W3S建议您执行以下操作：

您的浏览器不支持此视频格式。