Question

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

尝试加载视频时出现了一些问题，因为当我通过道具插入视频路径时，视频无法显示。只有控件可见，但它们是灰色的。这几乎就像找不到视频一样。这是我的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文件并在路径中加载完全与视频路径道具相同的内容，则会显示视频并且控件处于活动状态。像这样......

      <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语句的路径并将导入值插入源标记来解决问题....

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

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

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

非常感谢任何见解。： - ）

Answer 1

您声明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>
    );

我希望它有效=）

React - 使用和加载视频文件

1 个答案: