How can I implement Videogular in an Ionic 2 / Angular 2 project?

Question

I am looking for a working example of Videogular 2 running on Ionic 2, or even a flat Angular 2 environment.

I have tried many different online examples, and it looks like the documents are out of date or completely inaccurate.

For example, the documents clearly state that a base player can be created using:

<videogular vg-theme="config.theme"> <vg-media vg-src="config.sources" vg-tracks="config.tracks"> </vg-media> <vg-overlay-play></vg-overlay-play> </videogular> 

What I load in Typescript:

 import { VgAPI } from 'videogular2/core'; import { VgCoreModule } from 'videogular2/core'; import { VgControlsModule } from 'videogular2/controls'; import { VgOverlayPlayModule } from 'videogular2/overlay-play'; 

This gives me an error:

 Error: Uncaught (in promise): Error: Template parse errors: 'vg-media' is not a known element 

I have little success using vg-player and not videogular and then the video tag. It works, but just gives me a native player. Any attempt to use the Videogular tags inside it will give me a similar error above.

All components are also present in my app.module.ts file in the imports .

My full controller:

 import { Component } from '@angular/core'; import { NavController, NavParams, ToastController, LoadingController } from 'ionic-angular'; import { VgAPI } from 'videogular2/core'; import { VgCoreModule } from 'videogular2/core'; import { VgControlsModule } from 'videogular2/controls'; import { VgOverlayPlayModule } from 'videogular2/overlay-play'; import { Level } from '../../providers/level'; @Component({ selector: 'page-programme-overview', templateUrl: 'programme_overview.html' }) export class ProgrammeOverviewPage { api: VgAPI; videos: any; config: any; constructor( public navCtrl: NavController, public toastCtrl: ToastController, private navParams: NavParams) { this.videos = [ { sources: [ {src: "http://static.videogular.com/assets/videos/videogular.mp4", type: "video/mp4"}, {src: "http://static.videogular.com/assets/videos/videogular.webm", type: "video/webm"}, {src: "http://static.videogular.com/assets/videos/videogular.ogg", type: "video/ogg"} ] }, { sources: [ {src: "http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov", type: "video/mp4"}, {src: "http://static.videogular.com/assets/videos/big_buck_bunny_720p_stereo.ogg", type: "video/ogg"} ] } ]; this.config = { preload: "none", autoHide: false, autoHideTime: 3000, autoPlay: false, sources: this.videos[0].sources, theme: { url: "https://unpkg.com/ videogular@2.1.2 /dist/themes/default/videogular.css" }, plugins: { poster: "http://www.videogular.com/assets/images/videogular.png" } }; } // Play onPlayerReady(api: VgAPI) { this.api = api; this.api.play(); } } 

And my full HTML:

 <ion-header> <ion-navbar> <ion-title>Video</ion-title> </ion-navbar> </ion-header> <ion-content> <videogular vg-theme="config.theme"> <vg-media vg-src="config.sources" vg-tracks="config.tracks"> </vg-media> <vg-overlay-play></vg-overlay-play> </videogular> </ion-content> 

Any help is appreciated. I am currently considering other options for the video, but would like to stick with Videogular as this seems like a great solution if I can get it working.

Answer 1

It works for me in Ionic2, and I like working with it so far ... it seems you are mixing Videogular (1) with Videogular2 in your code.

<videogular> belongs to their vg1 lib (found at http://www.videogular.com/ )

the repo you are looking for is here: https://github.com/videogular/videogular2 and the docs are related to Readme - use them.

Follow the Get started in these documents and avoid videogular.com (vg1) and you will quickly learn to see the differences in order to avoid online links to v1. Hope this helps!

Answer 2

Note that if you prefer to use lazy loading, you do not need to import modules into app.module.ts . Just lazy load it into the ts page module

 ... import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { VgCoreModule } from 'videogular2/core'; import { VgControlsModule } from 'videogular2/controls'; import { VgOverlayPlayModule } from 'videogular2/overlay-play'; import { VgBufferingModule } from 'videogular2/buffering'; import { VgAPI } from 'videogular2/core'; ... 

After installing the videos via npm, if you are using lazy loading, and I assume that you are importing these modules from videogular2 on page.module.ts

 imports: [ ... VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule ], providers:[ VgAPI ] 

VgAPI is the main api for almost all controls

in your html file

  <vg-player (onPlayerReady)="onPlayerReady($event)"> <vg-overlay-play></vg-overlay-play> <vg-buffering></vg-buffering> <vg-scrub-bar> <vg-scrub-bar-current-time></vg-scrub-bar-current-time> <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time> </vg-scrub-bar> <vg-controls> <vg-play-pause></vg-play-pause> <vg-playback-button></vg-playback-button> <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display> <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display> <vg-track-selector></vg-track-selector> <vg-volume></vg-volume> </vg-controls> <video #media [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" crossorigin> </video> </vg-player> 

in component.ts file

 import {VgAPI } from 'videogular2/core'; export class MyPage{ api:VgAPI; onPlayerReady(api: VgAPI) { this.api = api; } } 

Follow their documentation on the site