Loading a video file without input upload

Question

I am incidently using react but the fact remains: when I put up a simple page with an input to upload a local file, if I console.log the actual file once it has been selected, here is what I get from the console:

File {name: "myfile.mp4", lastModified: 1474084788000, lastModifiedDate: Fri Sep 16 2016 23:59:48 GMT-0400 (EDT), webkitRelativePath: "", size: 27828905…}
lastModified: 1474084788000
lastModifiedDate: Fri Sep 16 2016 23:59:48 GMT-0400 (EDT)
name: "myfile.mp4"
size: 27828905
type: "video/mp4"
webkitRelativePath: ""
__proto__: File

And so the file loads in the video tags and I can watch it. (The code is below...)

Then, if I want to load the same file but from a hardcoded full path instead, like so: "file:///path/to/myfile.mp4", an error pops up This video file format is not supported. and what I get back from the console is the exact same path that I had previously hardcoded.

My question is how should one load a local file by using a hardcoded path instead of selecting a file from an input element?
OR
How to create an objectURL directly from a local path?

I've already tried to Blob the file before passing it on to the URL.createObjectURL function but, unless I did it something wrong, it didn't work out.

Render function code:

  render() {

    return (
      <div>
        <input type="file" ref="input" onChange={this.upload} />

        <video ref="video" type="video/mp4" controls loop autoPlay width="720"></video>  
        <div ref="message"></div>
      </div>
    );
  }

Functions:

  processs = (file) => {
      let fileURL = URL.createObjectURL(file);
      this.refs.video.src = fileURL;
  }

  playFile = (event) => {
    let file = event.target.files[0];
    console.log(file);

    //check if video can be played
    if(this.refs.video.canPlayType(file.type) != ""){
      this.processs(file);
    } else {
      this.refs.message.innerHTML = "This video file format is not supported."
    }

  };

What do you mean by _"load the same file but from a hardcoded full path instead"_? Setting the ` — guest271314, Sep 17 '16 at 16:38
In react, instead of passing the file as `const file = event.target.files[0]` from the input element, I just created a `this.state({myfile: "file:///fullpath/to/myfile.mp4"})` in the constructor and refer to it as `const file = this.state.myfile` — Jeanmichel Cote, Sep 17 '16 at 16:41
You can use `XMLHttpRequest()` to request local file as `Blob` — guest271314, Sep 17 '16 at 16:46

score -1 · Answer 1 · edited May 23 '17 at 12:19

-1

How to create an objectURL directly from a local path?

You can use XMLHttpRequest with responseType set to "blob". File inherits from Blob, you can pass returned Blob to your existing function which expects File object. See also Loading images from file with Javascript

var request = new XMLHttpRequest();
request.responseType = "blob";
request.open("GET", "file:///path/to/myfile.mp4");
request.onload = () => {
  // do stuff with `request.response` : `Blob`
}
request.send();

edited May 23 '17 at 12:19

Community

1
1

answered Sep 17 '16 at 16:43

guest271314

1
15
104
177

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. – Jeanmichel Cote Sep 17 '16 at 17:26
@JeanmichelCote Which browsers have you tried `javascript` at Answer? Have you read linked Question/Answer? – guest271314 Sep 17 '16 at 17:27
Try closing chrome, then launching with `--allow-file-access-from-files` flag set. See http://askubuntu.com/questions/160245/how-do-i-make-the-google-chrome-flag-allow-file-access-from-files-permanent/ – guest271314 Sep 17 '16 at 17:29
Oh yes, I did that. But It didn't change the result. – Jeanmichel Cote Sep 17 '16 at 17:30
Did you close all open instances of chrome? Or only the tab? Are you trying to load a file from `file:` protocol at an origin other than `file:` protocol? – guest271314 Sep 17 '16 at 17:30
I have quit entirely. Loading from file://. Also tried loading "http://localhost:3000/path/from/app/to/myfile.mp4" – Jeanmichel Cote Sep 17 '16 at 17:32
_"I have quit entirely."_ What do you mean? – guest271314 Sep 17 '16 at 17:33
`localhost` is not `file:` protocol. – guest271314 Sep 17 '16 at 17:36
Tried both. None worked. My code may be bad somewhere else. I may just end up using node's `fs`... – Jeanmichel Cote Sep 17 '16 at 17:37
Is the document which you are trying to load from `file:` protocol at `file:` protocol, or `localhost`? – guest271314 Sep 17 '16 at 17:38
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/123608/discussion-between-jeanmichel-cote-and-guest271314). – Jeanmichel Cote Sep 17 '16 at 17:40

score -1 · Answer 2 · answered Sep 17 '16 at 16:43

-1

Here is a working demo

Load Image or Video without Upload

Hope it helps

answered Sep 17 '16 at 16:43

Manoj Sethi

1,898
8
26
56

Loading a video file without input upload

2 Answers2