javascript - how to play blob video in angular - Stack Overflow

admin管理员组

文章数量:1404560

i am building a mobile app with a=ionic,i want to be able to play a blob file from uploaded video but i got this in the console

unsafe:blob:http://localhost:8100/3d42df5b-d852-4cac-83d8-af0c6d514b04 net::ERR_UNKNOWN_URL_SCHEME

Here is my code

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

When i tried to upload a video file, i got that in the console, please I need your help, what did i do wrong

i am building a mobile app with a=ionic,i want to be able to play a blob file from uploaded video but i got this in the console

unsafe:blob:http://localhost:8100/3d42df5b-d852-4cac-83d8-af0c6d514b04 net::ERR_UNKNOWN_URL_SCHEME

Here is my code

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

When i tried to upload a video file, i got that in the console, please I need your help, what did i do wrong

• javascript
• html
• angular
• ionic-framework
• html5-video

Share Improve this question Follow asked Jul 2, 2020 at 2:24 Js doeeJs doee 33311 gold badge1010 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

you can do it like this on Html :

<input type="file" accept="video/*" (change)="onSelectedFile($event)">

<video 
  *ngIf="prev_url" 
  [src]="prev_url" 
  style="width:300px; height:300px;" 
  controls></video>

on ts file :

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

here the working sample

本文标签： javascripthow to play blob video in angularStack Overflow