加载视频文件，无需上传输入

Loading a video file without input upload

本文关键字：传输 输入 视频 文件 加载      更新时间：2023-09-26

我偶然使用react，但事实仍然是:当我建立一个简单的页面，输入上传一个本地文件，如果我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."
    }
  };

下面是一个工作演示

无需上传即可加载图像或视频

希望有所帮助

如何直接从本地路径创建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();
相关文章：