How to play video in react js using html video tag

0 votes

Can somebody explain why my video won't load? The player is displayed, but no video.

class App extends Component {
render(){
 return ( 
<div className="App"> 
<p>hello/p> 
<video width="750" height="500" controls > 
<source src="..Videos/video1.mp4" type="video/mp4"/> </video> </div>
);
}
}

My directory is set up as follows:

Directory React App

I followed the advice and used src="../Videos/video1.mp4", and the outcome was the same.

Jul 19, 2022 in HTML by Tejashwini
• 3,820 points
5,959 views
include Video1 form "..Videos/video1.mp4"
class App extends Component {
render(){
 return ( 
<div className="App"> 
<p>hello/p> 
<video width="750" height="500" controls > 
<source src={Video1} type="video/mp4"/> </video> </div>
);
}
}

2 answers to this question.

0 votes
mine is the same, and ive been trying to figure out the error since
answered Apr 26, 2023 by chuks
0 votes
This is a solution:


import Video from "..Videos/video1.mp4"
class App extends Component {
render(){
 return ( 
<div className="App"> 
<p>hello/p> 
<video width="750" height="500" controls > 
<source src={Video} type="video/mp4"/> </video> </div>
);
}
}
answered May 21, 2023 by Renie

Related Questions In HTML

0 votes
0 answers

How to use <form:form> </form:form> TAG using HTML in Spring MVC?

How to utilize the <form:form> </form:form> In Spring MVC ...READ MORE

Jul 26, 2022 in HTML by Ashwini
• 5,430 points
236 views
0 votes
0 answers

How to insert spaces/tabs in text using HTML/CSS

how to add space in HTML except ...READ MORE

Jun 3, 2022 in HTML by Tejashwini
• 3,820 points
193 views
0 votes
0 answers

How to do calculations in HTML forms using JavaScript?

I'm developing a straightforward app that multiplies ...READ MORE

Jul 26, 2022 in HTML by Tejashwini
• 3,820 points
1,286 views
0 votes
1 answer

How to convert HTML to JSX (React.js)

You can use https://magic.reactjs.net/htmltojsx.htm which is an online HTML ...READ MORE

answered Aug 10, 2022 in HTML by Deepak
• 980 points
1,143 views
0 votes
0 answers

How to do calculation in PHP using a csv file for retrieving data?

Morning, I have a csv file and i ...READ MORE

Feb 11, 2020 in HTML by anonymous
• 140 points
1,244 views
0 votes
0 answers

How to hide image broken Icon using only CSS/HTML?

I need to hide this error image/ ...READ MORE

May 27, 2022 in HTML by Tejashwini
• 3,820 points
459 views
0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,880 points
2,215 views
0 votes
1 answer

Error:setState doesn't update the state immediately

Hello @kartik, The method setState() takes a callback. And ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,880 points
4,869 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 5, 2020 in Java-Script by Niroj
• 82,880 points
755 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP