React js Video upload is not working using createObjectURL

user_18365579 0
Viewed 259

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>

enter image description here

reactjs css html javascript
1 Answers

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>
  </>
);
Admin1
Related