如何以角度播放 blob 视频

Posted 2023-05-07

【中文标题】如何以角度播放 blob 视频

【英文标题】：how to play blob video in angular

【发布时间】：2020-10-22 13:27:39

【问题描述】：

我正在使用 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)
    

当我尝试上传视频文件时，我在控制台中得到了这个，我需要你的帮助，我做错了什么

【参考方案1】：

你可以在 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)
  

这里是工作sample