React - 使用和加载视频文件

Posted 2023-05-08

【中文标题】React - 使用和加载视频文件

【英文标题】：React - Using and loading Video files

【发布时间】：2017-12-06 01:22:08

【问题描述】：

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

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

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

奇怪的是，如果我创建一个静态 html 文件并完全按照它通过 videoPath 道具的路径加载，视频就会显示并且控件处于活动状态。就这样.....

      <video id="samp"   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>

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

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

任何见解将不胜感激。 :-)

【参考方案1】：

您声明const details, index = this.props; 来简写您的道具名称，因此不再需要使用this.props，只需使用details 或index。

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

我希望它有效 =)

【讨论】：

嗨 Yuri，我希望我早先从解构函数中看到了这一点。不错的收获！ :-) 不幸的是，它仍然产生相同的效果。

您的 props details 可能会在您的组件渲染之前传递给您的组件（在完全渲染时将视频 URL 设为未定义）。

使用 React，如果源标签有任何子标签，则会引发错误。以下是 W3Schools 推荐的内容：<video id="samp" width="640" height="480" controls><source src = details.videoPath type="video/mp4"></source>Your browser does not support this video format.</video>