反应 - 使用和加载视频文件

我遇到了一个独特的问题，我试图编写一个程序。我正在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文件和负载，因为它来通过将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语句顶上我的组件文件，并堵塞进口值到源代码中获得解决问题....

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

这将让在视频加载的反应，但是，作为一个在React中的初学者，它击败了我想要构建的程序功能的特定道具选择加载视频的目的。我不明白为什么会发生这种情况。但是，如果我将URL插入到src属性中，则不会发生这种情况。

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

任何有识之士将不胜感激。 :-)

来源

2017-07-02 user2632646

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

我希望工程=）

来源

2017-07-02 19:33:23

嗨尤里，我想我看到前面从解构。好的赶上！ :-) 不幸的是，它仍然有同样的效果。 – user2632646

您的道具细节prop可能在您的组件呈现之前传递给您的组件（使得视频URL在完全呈现时未定义）。 – Chris

反应 - 使用和加载视频文件

回答

相关问题