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 <video> element src at html? — guest271314
– guest271314, Commented Sep 17, 2016 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
– Jeanmichel Cote, Commented Sep 17, 2016 at 16:41
You can use XMLHttpRequest() to request local file as Blob — guest271314
– guest271314, Commented Sep 17, 2016 at 16:46

Manoj Sethi · Accepted Answer · 2016-09-17 16:43:20Z

-1

Here is a working demo

Load Image or Video without Upload

Hope it helps

answered Sep 17, 2016 at 16:43

Manoj Sethi

2,0589 gold badges30 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:19:25Z

-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, 2017 at 12:19

CommunityBot

11 silver badge

answered Sep 17, 2016 at 16:43

guest271314

1

11 Comments

Jeanmichel Cote Over a year ago

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

guest271314 Over a year ago

@JeanmichelCote Which browsers have you tried javascript at Answer? Have you read linked Question/Answer?

guest271314 Over a year ago

Try closing chrome, then launching with --allow-file-access-from-files flag set. See askubuntu.com/questions/160245/…

Jeanmichel Cote Over a year ago

Oh yes, I did that. But It didn't change the result.

guest271314 Over a year ago

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?

|

Collectives™ on Stack Overflow

Loading a video file without input upload

2 Answers 2

Comments

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related