0
339
ViewsReact js Video upload is not working using createObjectURL
I have used input tag in react js to select video element but it is not previewing the video, Already used UseEffect and key for video selctor but still not priviewing the video. And "videoRef.current?.load()" gives me error (TypeError: _videoRef$current.load is not a function). any other method to use or how should I Rewrite my code, please help?
const handleChange = (event) => {
const file = event.target.files[0];
if (!file) return;
setVideoSrc(URL.createObjectURL(file));
};
const videoRef = useRef();
useEffect(() => {
videoRef.current?.load();
}, [media.projectMedia]);
<input
type='file'
className='form-control form-control-sm'
id='media-URL'
accept='image/*,audio/*,gif/*,video/mp4,video/x-m4v,video/*'
onChange={(event) => {
handleChange(event);
}
}
/>
<video key={media.projectMedia} ref={videoRef} width='260' height='150' controls>
<source src={videoSrc} />
Your browser does not support the video tag.
</video>
·
Juan Pablo Isaza
1 answers
Answer question0
This work for me
const [videoSrc, setVideoSrc] = useState(null);
const handleChange = (event) => {
const file = event.target.files[0];
if (!file) return;
setVideoSrc(URL.createObjectURL(file));
};
const videoRef = useRef();
useEffect(() => {
videoRef.current?.load();
}, [videoSrc]);
return (
<>
<input
type='file'
className='form-control form-control-sm'
id='media-URL'
accept='image/*,audio/*,gif/*,video/mp4,video/x-m4v,video/*'
onChange={(event) => {
handleChange(event);
}
}
/>
<video ref={videoRef} width='260' height='150' controls>
<source src={videoSrc} />
Your browser does not support the video tag.
</video>
</>
);
·
Juan Pablo Isaza
Report
Answer question