I've been struggling with this issue for quite some time without knowing how to resolve it.
After some research, I came across a similar question: how to play blob video in angular. However, the problem is that the demo provided in the answer does not support "avi" and "mov" formats. Even though I am using the latest version of Chrome, it doesn't display the selected video for me.
In my HTML template file:
<input type="file" accept="video/*" (change)="onSelectedFile($event)">
<video
*ngIf="prev_url"
[src]="prev_url"
style="width:300px; height:300px;"
controls></video>
In my TS file:
export class AppComponent {
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)
}
}
You can check out a working sample here.
P.S. I also attempted to use a "vg-player", but unfortunately, it didn't work as expected.