Question

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

Answer 1

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

如果您遵循此StackOverflow answer，您将完全可以完成您想做的事情。如果将来链接断开，这就是他们所说的：

可以播放本地视频文件。

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


'change'事件被触发

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

使对象URL指向File对象

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

靠后看：）


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

基本上，一旦选择了文件，就将本机文件对象传递给proxy_command = "ssh -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no -i "+proxy_key+" -l "+proxy_user+" "+ proxy_host+" nc "+host proxy = paramiko.ProxyCommand(proxy_command) transport = paramiko.Transport(proxy) transport.connect() transport.set_hexdump(True) transport.auth_publickey(username=user, key=key) transport.auth_password(username=user, password=password) return paramiko.SFTPClient.from_transport(transport)。该函数的返回值是您应将URL.createObjectUrl(myNativeFileObj)传递给Videogular2的URL。

Answer 2

由于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下找到它们。

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);

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

3 个答案: