How to play a local video file using videogular2

Question

How can I play a local video file using Videogular. I know that for security reasons, the user has to manually select the file. However, I don't know how to set the source of videogular to the selected file.

I am using ng2-file-input to get the file reference. However, setting this file reference does not work in 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

I know this is an old thread, but I came across this myself and wanted to post the solution for others:

If you follow this StackOverflow answer, you will get exactly what you want to do. And in case the link breaks in the future, this is what they said:

It is possible to play a local video file.

When a file is selected via the input element:

1. 'change' event is fired
2. Get the first File object from the input.files FileList
3. Make an object URL that points to the File object
4. Set the object URL to the video.src property
5. Lean back and watch :)

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

Basically once your file is selected, pass the native file object to URL.createObjectUrl(myNativeFileObj). The return value of that function is the URL you should pass to Videogular2 as src.

Answer 2

As Angular uses webpack (if you created your app using Angular-CLI, your project will automatically be built with webpack), you could load the file as shown in this link: How to load a local video in React using webpack?

However, I'm not 100% sure if that would work with videogular2, taking in consideration the next comment: https://github.com/videogular/videogular2/issues/581

You can also use a web server to deliver the files, for example NginX. Direct in the sites-available default configuration (using NginX), you can set as root the path to the files you want to play, in that way you will be able to find them under localhost.

Answer 3

You also need to bypass security using 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);