如何在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标记取得了一些成功.这有效,但只是给了我本地玩家.任何在其中使用视频标签的尝试都会给我一个类似的错误.

所有组件也出现在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 混合在一起。

<videogular>来自他们的 vg1 lib（可在http://www.videogular.com/找到）

您正在寻找的存储库位于： https: //github.com/videogular/videogular2，并且文档已链接到自述文件中 - 使用这些。

按照这些文档中的入门指南进行操作并避开 videogular.com(vg1) 站点，您将很快学会查看差异，从而避免在线引用 v1。希望这可以帮助！