Загрузка видеофайла без загрузки ввода

Кстати, я использую реакцию, но факт остается фактом: когда я создаю простую страницу с вводом для загрузки локального файла, если я console.log фактический файл после того, как он был выбран, вот что я получаю из консоли:

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

И так файл грузится в тегах video и я могу его смотреть. (Код ниже...)

Затем, если я хочу загрузить тот же файл, но вместо этого из жестко запрограммированного полного пути, например так: "file:///path/to/myfile.mp4", всплывает ошибка This video file format is not supported., и то, что я получаю из консоли, является точно таким же путем, который я ранее жестко запрограммировал.

Мой вопрос заключается в том, как загрузить локальный файл, используя жестко заданный путь вместо выбора файла из элемента ввода?
ИЛИ
Как создать objectURL непосредственно из локальный путь?

Я уже пытался Blob файл перед передачей в функцию URL.createObjectURL, но, если я не сделал что-то не так, это не сработало.

Код функции рендеринга:

  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>
    );
  }

Функции:

  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."
    }

  };

person Jeanmichel Cote    schedule 17.09.2016    source источник
comment
Что вы имеете в виду под загрузить тот же файл, но вместо этого с жестко заданным полным путем? Установка элемента <video> src в html?   -  person guest271314    schedule 17.09.2016
comment
В ответ вместо того, чтобы передавать файл как const file = event.target.files[0] из элемента ввода, я просто создал this.state({myfile: "file:///fullpath/to/myfile.mp4"}) в конструкторе и ссылаюсь на него как const file = this.state.myfile   -  person Jeanmichel Cote    schedule 17.09.2016
comment
Вы можете использовать XMLHttpRequest() для запроса локального файла как Blob   -  person guest271314    schedule 17.09.2016


Ответы (2)


Вот рабочая демонстрация

Загрузить изображение или Видео без загрузки

Надеюсь, поможет

person Manoj Sethi    schedule 17.09.2016

Как создать objectURL непосредственно из локального пути?

Вы можете использовать XMLHttpRequest с responseType, установленным на "blob". File наследуется от Blob, вы можете передать возвращенный Blob в существующую функцию, которая ожидает объект File. См. также Загрузка изображений из файла с помощью 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();
person guest271314    schedule 17.09.2016
comment
Запросы между источниками поддерживаются только для схем протоколов: http, data, chrome, chrome-extension, https, chrome-extension-resource. - person Jeanmichel Cote; 17.09.2016
comment
@JeanmichelCote Какие браузеры вы пробовали javascript в Answer? Вы читали связанный Вопрос/Ответ? - person guest271314; 17.09.2016
comment
Попробуйте закрыть хром, а затем запустить с установленным флагом --allow-file-access-from-files. См. askubuntu.com/questions/160245/ - person guest271314; 17.09.2016
comment
О да, я сделал это. Но это не изменило результат. - person Jeanmichel Cote; 17.09.2016
comment
Вы закрыли все открытые экземпляры хрома? Или только вкладку? Вы пытаетесь загрузить файл из протокола file: в источник, отличный от протокола file:? - person guest271314; 17.09.2016
comment
Я бросил совсем. Загрузка из файла://. Также попытался загрузить localhost:3000/path/from/app/to/myfile.mp4. - person Jeanmichel Cote; 17.09.2016
comment
Я полностью бросил. Что вы имеете в виду? - person guest271314; 17.09.2016
comment
localhost не является file: протоколом. - person guest271314; 17.09.2016
comment
Пробовал оба. Ни один не работал. Мой код может быть плохим где-то еще. Я могу просто использовать узел fs... - person Jeanmichel Cote; 17.09.2016
comment
Является ли документ, который вы пытаетесь загрузить, по протоколу file: по протоколу file: или по протоколу localhost? - person guest271314; 17.09.2016
comment
Давайте продолжим обсуждение в чате. - person Jeanmichel Cote; 17.09.2016