我正在使用a = ionic构建移动应用程序,我希望能够播放上传视频中的Blob文件,但我在控制台中找到了它
unsafe:blob:http://localhost:8100/3d42df5b-d852-4cac-83d8-af0c6d514b04 net::ERR_UNKNOWN_URL_SCHEME
这是我的代码
<input type="file"accept="video/*" #fileInput name="proPics" (change)="onSelectedFile($event)">
preview(files) {
var URL = window.URL || window.webkitURL;
this.vidURL = URL.createObjectURL(files)
}
onSelectedFile(event){
this.selectedFile = <File>event.target.files[0]
this.preview(this.selectedFile)
}
当我尝试上传视频文件时,我在控制台中找到了它,请得到您的帮助,我做错了什么
答案 0 :(得分:3)
您可以在HTML上这样做:
<input type="file" accept="video/*" (change)="onSelectedFile($event)">
<video
*ngIf="prev_url"
[src]="prev_url"
style="width:300px; height:300px;"
controls></video>
在ts文件上:
prev_url : any;
constructor(
private sanitizer : DomSanitizer
) {}
onSelectedFile(ev) {
let file = ev.target.files[0];
var URL = window.URL;
this.prev_url = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
console.log(this.prev_url)
}
这里是工作示例:
https://stackblitz.com/edit/angular-ivy-m8zd1m?file=src%2Fapp%2Fapp.component.ts