如何在Ionic 2/Angular 2项目中实现Videogular？

Question

我正在寻找一个在Ionic 2环境中工作的Videogular 2的工作示例，甚至是在扁平的Angular 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>

我正在用Typescript加载：

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标签的尝试都会给我一个类似于上面的错误。

所有组件也存在于我的imports区域下的app.module.ts文件中。

我的完整控制器：

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

请注意，如果您喜欢使用延迟加载，则不需要在app.module.ts中导入模块。只需将其延迟加载到页面模块ts中

...
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';
...

在通过npm安装videogular之后，如果您使用延迟加载，请将这些模块从videogular2导入到您的page.module.ts中

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

VgAPI是几乎所有控件的核心api。

在您的html文件中

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

在component.ts文件中

import {VgAPI } from 'videogular2/core';

export class MyPage{

api:VgAPI;

onPlayerReady(api: VgAPI) {
  this.api = api;
 }
}

请在site上阅读他们的文档

Answer 2

我让它在Ionic2中工作，到目前为止，我喜欢用它...看起来你在代码中混合了Videogular(1)和Videogular2。

<videogular>来自他们的vg1库(在http://www.videogular.com/上找到)

您要查找的代码库在这里：https://github.com/videogular/videogular2，文档在自述文件中有链接-使用这些文档。

遵循这些文档中的入门指南，避免访问videogular.com(vg1)站点，您很快就会了解其中的不同之处，这样就可以避免在线引用v1。希望这能有所帮助！