如何在Ionic 2/Angular 2項目中實現Videogular？

我正在尋找一個在Ionic 2環境中工作的Videogular 2，甚至是一個平坦的Angular 2環境的工作示例。如何在Ionic 2/Angular 2項目中實現Videogular？

我已經嘗試了許多不同的在線示例，感覺就像文檔過時或完全不準確。

例如，文件明確指出，一個基本的玩家可以與生產：

<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而不是videogular，然後在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/[email protected]/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，因爲它似乎是一個很好的解決方案。

來源

2017-07-18 Mike

您好邁克你可以請分享一個例子，你如何能夠得到這個在Ionic 2+中的工作，我正努力實現這一點（跟隨Videogular2指南），並希望看到你如何能夠得到它加工。預先感謝奧利弗 –

我有它在Ionic2中工作，我喜歡與它一起工作到目前爲止......看起來你在代碼中混合了視頻（1）和Videogular2。

<videogular>是從VG1 LIB（在http://www.videogular.com/找到）

您正在尋找回購是在這裏：https://github.com/videogular/videogular2，和文檔鏈接到自述 - 使用這些。

請按照這些文檔中的入門指南並避免使用videogular.com（vg1）網站，您將快速瞭解差異情況，以避免在線參考v1。希望這可以幫助！

來源

2017-07-18 17:31:58 j2d2

如何在Ionic 2/Angular 2項目中實現Videogular？

回答

相關問題