时间戳

首页 > 解决方案 > 如何使用 videogular2 播放本地视频文件

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

问题描述

如何使用 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>

标签： angularvideovideogular

解决方案

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

如果您遵循此StackOverflow 答案，您将得到您想要做的事情。如果将来链接中断，他们就是这样说的：

可以播放本地视频文件。

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

  1. 'change' 事件被触发
  2. 从 input.files FileList 中获取第一个 File 对象
  3. 创建一个指向 File 对象的对象 URL
  4. 将对象 URL 设置为 video.src 属性
  5. 向后倾斜并观看:)

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

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

推荐阅读