How to load video from local file URL without MediaStream

Asked Oct 31 '22 at 07:43

Active Oct 31 '22 at 07:43

Viewed 200 times

What's the way play local videos? This option doesn't work:

const url = '/localVideo.mp4';

<ReactPlayer url={url} width="100%"
             height="100%"
             controls={true} />

I get the error that src attribute is empty:

MediaError {code: 4, message: 'MEDIA_ELEMENT_ERROR: Empty src attribute'}

The url is a correct sting, works fine with native <video element.

I checked the sources for the library, and it seems like the MediaStream is required:

   if (isMediaStream(url)) {
      try {
        this.player.srcObject = url
      } catch (e) {
        this.player.src = window.URL.createObjectURL(url)
      }

MDN says it's no longer required. It should work with a string.:

In older versions of the Media Source specification, attaching a stream to a element required creating an object URL for the MediaStream. This is no longer necessary, and browsers are removing support for doing this.

asked Oct 31 '22 at 07:43

Max Koretskyi

101,079
60
333
488

thanks, tried like that `` with correct url when passing url as an array – Max Koretskyi Oct 31 '22 at 08:27
Weird, works for me: https://codesandbox.io/s/react-playground-forked-qjzrkx?file=/index.js – Kaiido Oct 31 '22 at 08:29
yeah, it works for me too for URLs on the web, doesn't work for local files – Max Koretskyi Oct 31 '22 at 08:30
And you're sure the URL is correct? If you do `fetch(url).then(resp => console.log(resp.url))` and navigate to the logged URL you see your video? – Kaiido Oct 31 '22 at 08:51
@Kaiido, yeah, I can even see the video if put into ` – Max Koretskyi Oct 31 '22 at 09:42

How to load video from local file URL without MediaStream

0 Answers0