Angular 如何使用videogular2播放本地视频文件

如何使用Videogular播放本地视频文件。我知道出于安全原因，用户必须手动选择文件。但是，我不知道如何将

videogular

的源设置为所选文件

我正在使用

ng2文件输入

获取文件引用。但是，在

videogular

中设置此文件引用不起作用

应用程序组件.ts

导出类AppComponent{
api:VgAPI；
mediaSrc:string；
媒体类型：字符串；
公共活动（$事件）{
const media=$event.currentFiles[0]；
this.mediaSrc=URL.createObjectURL（媒体）；
this.mediaType=media.type；
this.api.play（）；
}
公共onPlayerReady（api:VgAPI）{
this.api=api；
}
}

app.component.html

由于Angular使用webpack（如果您使用Angular CLI创建应用程序，您的项目将自动使用webpack生成），您可以加载文件，如此链接所示：

但是，考虑到下一条评论，我不能100%确定这是否适用于videogular2：

您还可以使用web服务器来交付文件，例如NginX。

---

直接在站点可用默认配置（使用NginX）中，您可以将要播放的文件的路径设置为root，这样您就可以在localhost下找到这些文件。

您还需要使用

domsanizer来绕过安全性

export class AppComponent 
{
     constructor(private domSanitizer: DomSanitizer){}

     //...
     let URL = window.URL || window.webkitURL;
     const objectURL = URL.createObjectURL(media);
     this.mediaSrc = this.domSanitizer.bypassSecurityTrustUrl(objectURL);

我知道这是一个老话题，但我自己也遇到了这个问题，想为其他人发布解决方案：

如果你遵循这一点，你会得到你想要做的。如果将来链接中断，他们会这么说：

可以播放本地视频文件


通过输入元素选择文件时：

“更改”事件被激发
从input.files文件列表中获取第一个文件对象
创建指向文件对象的对象URL
将对象URL设置为video.src属性
向后靠看：）

基本上，选择文件后，将本机文件对象传递给
URL.createObjectUrl（myNativeFileObj）
。该函数的返回值是作为
src
传递给Videogular2的URL