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

【问题标题】：How to play a local video file using videogular2如何使用 videogular2 播放本地视频文件
【发布时间】：2018-11-22 04:05:25
【问题描述】：

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

【问题讨论】：

标签： angular video videogular

【解决方案1】：

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

如果你关注这个StackOverflow answer，你会得到你想要做的。如果将来链接断开，他们就是这样说的：

可以播放本地视频文件。

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

'change' 事件被触发

从 input.files FileList 中获取第一个 File 对象

创建一个指向 File 对象的对象 URL

将对象 URL 设置为 video.src 属性

靠后看：）

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

基本上，一旦您选择了文件，就将本机文件对象传递给URL.createObjectUrl(myNativeFileObj)。该函数的返回值是您应该作为src 传递给 Videogular2 的 URL。

【讨论】：

【解决方案2】：

您还需要使用 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);

【讨论】：

【解决方案3】：

由于 Angular 使用 webpack（如果您使用 Angular-CLI 创建应用程序，您的项目将自动使用 webpack 构建），您可以按照以下链接加载文件： How to load a local video in React using webpack?

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

您还可以使用 Web 服务器来传递文件，例如 NginX。直接在站点可用的默认配置中（使用NginX），您可以将要播放的文件的路径设置为root，这样您就可以在localhost下找到它们。

【讨论】：