在Angular 11中,使用Angular DomSanitizer将Blob URL转换为安全URL,然后使用HTML5视频标签播放视频。
以下是代码示例:
在.component.ts文件中:
import { DomSanitizer } from '@angular/platform-browser';
export class VideoPlayerComponent {
videoUrl: any;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
this.getVideo();
}
getVideo() {
// Code to fetch video from API and set it to videoUrl variable
}
getSafeUrl() {
return this.sanitizer.bypassSecurityTrustUrl(this.videoUrl);
}
}
在.component.html文件中:
在以上代码中,我们首先导入了DomSanitizer服务,然后在getSafeUrl()方法中调用了它,将Blob URL转换为安全URL。在组件的HTML文件中,我们使用Angular插值表达式来绑定视频源,然后使用HTML5视频标签来播放视频。
这样,我们就以正确的方式在Blob URL中播放了视频。