在没有输入上传的情况下加载一个视频文件

我正在使用反应，但事实依然存在：当我用一个输入上传一个本地文件的简单页面时，如果我选择了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." 
    } 

    };

来源

2016-09-17 Jeanmichel Cote

什么您_“加载相同的文件，而是从一个硬编码的完整路径，而不是”的意思是_ ？在'html'中设置'

在反应中，我只是创建了一个'this.state（{myfile：“file：/// fullpath/to/file）作为'const file = event.target.files [0] myfile.mp4“}）'并且将其称为'const file = this.state.myfile' –

您可以使用'XMLHttpRequest（）'来请求本地文件为'Blob' – guest271314

如何直接从本地路径创建的ObjectURL？

您可以使用XMLHttpRequest和responseType设置为"blob"。 File继承自Blob，则可以将返回的Blob传递给您期望File对象的现有函数。另请参见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();

来源

2016-09-17 16:43:10 guest271314

只支持跨源请求协议方案：http，数据，chrome，chrome扩展，https，chrome扩展资源。 –

@JeanmichelCote你在Answer上试过'javascript'哪些浏览器？你读过链接的问题/答案吗？ – guest271314

对不起，我不确定你的意思是... –

这里是一个工作演示

Load Image or Video without Upload

希望它可以帮助

来源

2016-09-17 16:43:20

在没有输入上传的情况下加载一个视频文件

回答

相关问题