[this is the output I get][1]
I am working on this video output for days now. I have generated this video using yolo5 model now I want to display my output on reactjs but I am facing some issues playing the video in reactjs as I have tried multiple ways suggested on the internet such as react player UseState etc but none of them worked BTW my video is playing fine on the media player I have also tried to change the codec of the video but still it didn't work.
`import React from "react";
import video from '../car_video/new_video_test_1.avi';
import video2 from '../detect/new_video_9.mp4';
return (
<div>
<main className="mt-5 p-5" style={{backgroundColor:"azure"}}>
<div className="container-fluid p-5">
<div className="row pt-4 img-block">
<div className="col-xl-6 col-md-6 mb-6">
{/*
<ReactPlayer className='react-player fixed-bottom' url= {require('../car_video/video1.mp4')}
controls = {true} style={{display:"block", width:"50%", height:"50%",flex:"1",position:"relative"}}/> */}
<video controls autoPlay style={{width:"100%", height:"auto"}}>
<source src={video} type="video/mp4" codecs = "mp4v.oo[.V]"/>
</video>
</div>
<div className="col-xl-6 col-md-6 mb-6">
<video controls autoPlay style={{width:"100%", height:"auto"}}>
<source src={video2} type="video/mp4" codecs="mp4v.oo[.V]"/>
</video>
</div>
</div>
</div>
</main>
</div>
)
}
`[1]: https://i.stack.imgur.com/JDRHW.png
