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

Question

如何使用视频播放本地视频文件。我知道出于安全原因，用户必须手动选择文件。但是，我不知道如何将videogular的源代码设置为选定的文件。

我正在使用ng2-file-input获取文件引用。但是，设置此文件引用在videogular中不起作用。

app.component.ts

export class AppComponent {
  api: VgAPI;
  mediaSrc: string;
  mediaType: string;

  public onAction($event) {
    const media = $event.currentFiles[0];
    this.mediaSrc = URL.createObjectURL(media);
    this.mediaType = media.type;
    this.api.play();
  }

  public onPlayerReady(api: VgAPI) {
    this.api = api;
  }
}

app.component.html

<ng2-file-input (onAction)="onAction($event)"></ng2-file-input>
<vg-player (onPlayerReady)="onPlayerReady($event)">
  <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
      <source [src]="mediaSrc" [type]="mediaType">
  </video>
</vg-player>

Answer 1

我知道这是一条老生常谈，但我自己发现了这个问题，并想为其他人发布解决方案：

如果您遵循这个StackOverflow answer，您将得到您想要做的事情。如果这种联系在未来中断，他们是这样说的：

可以播放本地视频文件。 当通过输入元素选择文件时：

1. “更改”事件被触发
2. 从input.files FileList获取第一个文件对象
3. 创建指向File对象的对象URL
4. 将object设置为video.src属性
5. 向后倾看:)

http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/

基本上，一旦您的文件被选中，将本机文件对象传递给URL.createObjectUrl(myNativeFileObj)。该函数的返回值是以src的形式传递给Videogular2的URL。

Answer 2

由于使用webpack (如果您使用Angular创建您的应用程序，您的项目将自动使用webpack构建)，您可以加载该文件，如以下链接所示：How to load a local video in React using webpack?。

但是，考虑到下一条评论: videogular2，我不能100%确定这是否适用于https://github.com/videogular/videogular2/issues/581

您还可以使用web服务器来传递文件，例如NginX。直接进入站点-可用的默认配置(使用NginX)，您可以将要播放的文件的路径设置为根用户，这样您就可以在localhost下找到它们。

Answer 3

您还需要使用DomSanitizer绕过安全性。

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

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