Javascript ReactJS 组件 HTML5 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36948919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS component HTML5 video
提问by Liondancer
I am trying to have have video in my web page using HTML <video>tag using ReactJS and JSX. Right now nothing is playing even though my component has the path to the file
我正在尝试<video>使用 ReactJS 和 JSX使用 HTML标记在我的网页中播放视频。即使我的组件具有文件路径，现在也没有播放任何内容
IntroVideo this.props:
IntroVideo this.props：
{
introVideo: "assets/media/Cherngloong_website_intro_Uz921bT.mp4",
muted: "true"
}
Component:
成分：
class IntroVideo extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return(
<div>
<video className="video-container video-container-overlay" autoPlay="true" loop muted={ this.props.muted }>
<source src={ this.props.introVideo } type="video/mp4" />
</video>
</div>
);
}
}
Here is what I see in the developer tools:
这是我在开发人员工具中看到的：
<video class="video-container video-container-overlay" autoplay="" loop="" muted="" data-reactid=".0.1.0.0">
<source type="video/mp4" data-reactid=".0.1.0.0.0" src="assets/media/Cherngloong_website_intro_Uz921bT.mp4">
</video>
In the developer tools, if I right click the srcvalue and click on "Open link in new tab", the video would play in the new tab. So I believe it the path to the file is correct.
在开发人员工具中，如果我右键单击该src值并单击"Open link in new tab"，视频将在新选项卡中播放。所以我相信文件的路径是正确的。
I am doing the same thing for another Component but it is for an image and it works fine:
我正在为另一个组件做同样的事情，但它是针对图像的，并且工作正常：
About this.props:
关于this.props：
{
aboutImg: "assets/media/The_Lion_Dances_Celebrate_Happy_New_Year_Clipart.jpg"
}
Component:
成分：
class About extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return(
<div id="about-container">
<div id="about-img-container">
<img src={ this.props.aboutImg } alt="about_img"/>
</div>
<div id="about-text-container">
<p>
Message
</p>
</div>
</div>
);
}
}
Developer Tools:
开发者工具：
<div id="about-container" data-reactid=".0.1.1">
<div id="about-img-container" data-reactid=".0.1.1.0">
<img alt="about_img" data-reactid=".0.1.1.0.0" src="assets/media/The_Lion_Dances_Celebrate_Happy_New_Year_Clipart.jpg">
</div>
<div id="about-text-container" data-reactid=".0.1.1.1">
<p data-reactid=".0.1.1.1.0">Message</p>
</div>
</div>
回答by Timothy Kanski
It looks like a bad path. The generated html seems to be fine. I tested it here:
它看起来像一条糟糕的道路。生成的 html 似乎没问题。我在这里测试过：
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video
The video rendered fine, and all I did was change the src.
视频渲染得很好，我所做的就是更改 src。
<video className="video-container video-container-overlay" autoPlay="" loop="" muted="" data-reactid=".0.1.0.0">
<source type="video/mp4" data-reactid=".0.1.0.0.0" src="mov_bbb.mp4">
</video>
