Ionic 2/Angular 2プロジェクトでVideogularを実装するにはどうすればよいですか？

Question

私は、Ionic 2環境、またはフラットなAngular 2環境でも動作するVideogular 2の実例を模索しています。

私は多くの異なるオンラインの例を試しましたが、ドキュメントは古くなったり完全に不正確であるように感じます。例えば

、ドキュメントは明確に基本的なプレイヤーがで製造することができると述べている：

私は活字体にロードしています

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

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

：

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

これは私にエラーを与える：

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

の代わりにvg-player要素を使用して少し成功しました3210、次にvideoのタグが含まれています。これは動作しますが、ただネイティブプレーヤーを私に与えます。その中でVideogularタグを使用しようとすると、上記と同様のエラーが発生します。

すべてのコンポーネントは、app.module.tsファイルのimportsエリアにも存在します。

マイフルコントローラー：

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

} 

そして、私の完全な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> 

すべてのヘルプは大歓迎です。この時点で私は他のビデオオプションも検討していますが、Videogularを魅力的なものにしたいと思っています。

Answer 1

私はIonic2で作業していますが、これまでの作業は好きです... Videogular（1）とVideogular2を混在させているようです。 、https://github.com/videogular/videogular2 とドキュメントはReadmeファイルににリンクされている - これらを使用します。

<videogular>あなたが探しているレポはこちら（http://www.videogular.com/で発見）そのVG1のlib

からです。

videog.com（vg1）サイトを避けるため、これらのドキュメントの「はじめに」に従ってください。そうすれば、v1のオンラインリファレンスを避けることができます。お役に立てれば！