How to play a local video file using videogular2

angular 6 video player example
play local video in angular
angular video converter
mat-video stackblitz
vg-player
ng2 video
this video nativeelement
angular video compression

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>

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.

How to play a local video file using videogular2 - angular - html, 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  Videogular is an HTML5 video player for Angular 2.0. Videogular is a wrapper over the HTML5 video tag, so you can just add whatever you want. Videogular is a wrapper over the HTML5 video tag, so you can just add whatever you want.

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

Not allowed to load local resource: file:///C:/tempabcd , Unable to load video from the local path. On web you can't load videos from local paths. It is possible to play a local video file. When a The return value of that function is the URL you should pass to Videogular2 as src . Personally I've been learning React and just used a React for YouTube video control. It handles the use of video as a background option. I got a free stock video for my home page, put it up on YouTube and run the React YouTube tool. I'm sure there will be Angular video for YouTube controls out there soon if videogular2 hasn't done it already.

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.

Having trouble loading local video content · Issue #121 · videogular , Hi there I'm totally new to dev and im trying to get videogular to play a video on the server. Here is my provider code: ( function() { angular  Videogular is an HTML5 video player for Angular 2.0.Videogular is a wrapper over the HTML5 video tag, so you can just add whatever you want. This provides a very powerful, but simple to use solution, for everybody.

Building an Angular Video Player with Videogular, With Videogular, you can play HTML5 video, audio, or any other content that you want. npm install videogular2 --save npm install @types/core-js --save-dev To do that you need to add CSS to your .angular-cli.json file available on the root​  Extend the player with your custom elements. Change the skin with plain CSS. And don’t forget to check our official modules. With Videogular you can play literally anything. Thanks to our API you can create your own media elements to play maps, SVG/CSS animations, slides, VR, etc and still use the same controls.

Questions for tag videogular, How to make video by default in full screen in angular with videogular2? Ionic3 Angular not allows to access local video file from video player (Android & iOS). As the name suggests, Videogular is a media framework written in Angular 2+. With Videogular, you can play HTML5 video, audio, or any other content that you want. There is an implementation for Angular 1.X (a.k.a AngularJS), but in this article we will talk only about the current Angular 2+ version. So,

Plying video issue - ionic-v3, videogular2. Videogular is a video application framework for desktop and mobile powered by Angular. It can play local files with a customizable  The Chromecast obviously doesn’t provide any way to plug in a USB drive and play local files, so you’re stuck streaming them over the network. Videostream and Plex take advantage of this, setting up one of your computers to function as a media server the Chromecast streams just the video file from.