In my project, I am trying to add and preview video using video tag. But here I am facing a problem "Not allowed to load local source: file:///C:/fakepath/test-video.mp4". When I search for some solutions, it suggested changing the browser settings. But I wish to find a solution without changing any browser settings.
Also how to get the exact file path?, if I got the correct path is that enough to fix this problem?
...
const [videofile, setVideo] = useState("");
...
const onChange = (e: any) => {
setTemp(true);
console.log("event inside onchange", e);
const a = e.target.value;
console.log("video file", a);
setVideo(a);
};
...
return (
<div>
<div style={{ width: "100%" }}>
<div className="container p-0">
{temp ? (
<video controls src={videofile} />
) : (
<div className={styles.uploadBlock}>
{edit ? (
<img src={"#"} />
) : (
<>
<div className={styles.multimediaBox}>
<span className={styles.iconBox}>
<FontAwesomeIcon icon={faCirclePlay} />
</span>
</div>
</>
)}
</div>
)}
</div>
<div className={styles.btnGroup}>
<Button
className="secondary-button"
variant="contained"
component="label"
onChange={onChange}
>
{buttonLabel}
<input hidden accept="video/*" type="file" />
</Button>
....
Please give me a suggestion to fix this problem.