admin管理员组文章数量:1323342
I've run into a unique problem with a program I'm trying to write. I'm writing a backend REST api in Symfony2 which enables a user to upload a video file (mp4). I have a front end client that I've written in React. I want to be able to select a specific video file from a list of choices and pass enough information down to a Component via props to load a video.
There's been a bit of a problem trying to load the video as when I plug the path to the video in via props, the video does not display. Only the controls are visible, though they are greyed out. It's almost as though it can't find the video. This is an example of what my React code looks like as of the moment.
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>
);
The odd thing is that if I create a static html file and load in the path exactly as it es through the videoPath props, the video is displayed and the controls are active. Like so.....
<video id="samp" width="640" height="480" controls>
<source src="/Users/thevideos/SideProjects/speechQuill/app/../web/uploads/227bd2a3eee545b251f9362e08b1debe.mp4" type="video/mp4">
</source>
</video>
I've been unable to determine why exactly this occurs. I can get around the problem by plugging in the path to an import statement atop my Component file and plugging the import value into the source tag....
import video from './prototype.mp4';
.
.
<div>
<video controls src={video} type="video/mp4"></video>
This will get the video loading in React but, as a beginner in React, it defeats the purposes of loading in the video from a specific prop selection for the functionality of the program I'm trying to build. I don't understand why exactly this is occurring. It doesn't happen if I plug in a URL into the src property however.
My symfony backend loads the file into a separate directory for the client to pull from. That's how I intended the application to run but I'm considering altering the upload process to send it to Cloudinary or something so I can get around this issue. Inevitably, I'd like to use something like popcorn.js so I can annotate uploaded videos. Still, I'd like to understand why this is happening in React and not a static html file and how to circumvent this problem.
Any insight would be much appreciated. :-)
I've run into a unique problem with a program I'm trying to write. I'm writing a backend REST api in Symfony2 which enables a user to upload a video file (mp4). I have a front end client that I've written in React. I want to be able to select a specific video file from a list of choices and pass enough information down to a Component via props to load a video.
There's been a bit of a problem trying to load the video as when I plug the path to the video in via props, the video does not display. Only the controls are visible, though they are greyed out. It's almost as though it can't find the video. This is an example of what my React code looks like as of the moment.
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>
);
The odd thing is that if I create a static html file and load in the path exactly as it es through the videoPath props, the video is displayed and the controls are active. Like so.....
<video id="samp" width="640" height="480" controls>
<source src="/Users/thevideos/SideProjects/speechQuill/app/../web/uploads/227bd2a3eee545b251f9362e08b1debe.mp4" type="video/mp4">
</source>
</video>
I've been unable to determine why exactly this occurs. I can get around the problem by plugging in the path to an import statement atop my Component file and plugging the import value into the source tag....
import video from './prototype.mp4';
.
.
<div>
<video controls src={video} type="video/mp4"></video>
This will get the video loading in React but, as a beginner in React, it defeats the purposes of loading in the video from a specific prop selection for the functionality of the program I'm trying to build. I don't understand why exactly this is occurring. It doesn't happen if I plug in a URL into the src property however.
My symfony backend loads the file into a separate directory for the client to pull from. That's how I intended the application to run but I'm considering altering the upload process to send it to Cloudinary or something so I can get around this issue. Inevitably, I'd like to use something like popcorn.js so I can annotate uploaded videos. Still, I'd like to understand why this is happening in React and not a static html file and how to circumvent this problem.
Any insight would be much appreciated. :-)
Share Improve this question asked Jul 2, 2017 at 19:08 user2632646user2632646 511 gold badge1 silver badge2 bronze badges1 Answer
Reset to default 4You are declaring const {details, index} = this.props;
to shorthand the name of your props, so it's not necessary anymore to use this.props, just use details
or 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>
);
I hope it works =)
本文标签: javascriptReactUsing and loading Video filesStack Overflow
版权声明:本文标题:javascript - React - Using and loading Video files - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742133261a2422257.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论