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
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 src
value 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.
I am doing the same thing for another Component but it is for an image and it works fine:
About 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>
Playing Video in React. To play video in React, you need to use the HTML video element, specify a source of the video and its type. Along with these required attributes, you can provide additional properties to customize the video player.
React is very user-friendly and versatile, it is a popular programming language used today, but it operates under HTML5.
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.
It looks like a bad path. The generated html seems to be fine. I tested it here:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video
The video rendered fine, and all I did was change the 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With