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

Question

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

尝试加载视频时出现了一些问题，因为当我通过 Prop 插入视频的路径时，视频不显示。只有控件是可见的，尽管它们是灰色的。就好像找不到视频一样。这是我的 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>
    );

奇怪的是，如果我创建一个静态 html 文件并完全按照 videoPath Prop 加载路径，则会显示视频并且控件处于事件状态。像这样......

      <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>

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

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

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

Answer 1

您正在声明 const {details, index} = this.props;简写你的 Prop 名称，所以不再需要使用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>
    );

我希望它有效 =)