Comment puis-je implémenter Videogular dans un projet Ionic 2/Angular 2?

Question

Je cherche un exemple de travail de Videogular 2 travaillant dans un environnement Ionic 2, ou même un environnement angulaire 2 plat.

J'ai essayé beaucoup d'exemples différents en ligne et j'ai l'impression que les docs sont très obsolètes ou totalement inexacts.

Par exemple, docs indiquer clairement qu'un joueur de base peut être produit avec:

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

    <vg-overlay-play></vg-overlay-play> 
    </videogular> 

que je chargement dactylographiée:

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

Cela me donne l'erreur:

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

J'ai un peu de succès en utilisant un élément vg-player au lieu de videogular, puis une étiquette video dans. Cela fonctionne, mais me donne juste le joueur natif. Toute tentative d'utiliser des balises Videogular à l'intérieur me donnera une erreur similaire à ce qui précède. Tous les composants sont également présents dans mon fichier app.module.ts sous la zone imports.

Mon contrôleur complet:

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

} 

Et mon plein 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> 

Toute aide est grandement appréciée. À ce stade, je considère d'autres options vidéo, mais je serais ravi de rester avec Videogular car il semble être une excellente solution, si je peux le faire fonctionner.

Answer 1

Je l'ai travailler dans Ionic2, et j'aime travailler avec jusqu'à présent ... il semble que vous mélangez Videogular (1) avec Videogular2 dans votre code.

<videogular> est de leur VG1 lib (qui se trouve à http://www.videogular.com/)

le repo que vous cherchez est ici: https://github.com/videogular/videogular2, et les docs sont liés dans le Readme - les utiliser.

Suivez la mise en route de ces documents et évitez le site videogular.com (vg1). Vous apprendrez rapidement à voir les différences afin d'éviter les références en ligne à v1. J'espère que cela t'aides!