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

我正在寻找一个Videogular 2在Ionic 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>

这给了我一个错误：

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

我使用了一个

vg播放器

元素，而不是

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，因为它似乎是一个很好的解决方案，如果我能让它工作的话。

我在Ionic2中使用了它，到目前为止我喜欢使用它。。。似乎您在代码中混合了视频规则（1）和视频规则2

来自他们的vg1库（位于）

您正在寻找的回购协议如下：， 这些文档在自述文件中链接到—请使用这些文档

---

遵循这些文档中的入门指南，避开videogular.com（vg1）网站，您将很快学会了解差异，从而避免在线参考v1。希望这有帮助

请注意，如果您喜欢使用延迟加载，则无需导入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后，如果您使用延迟加载，并且我认为您是，请在page.module.ts中从videogular2导入这些模块

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>

---

在

上查看他们的文档，您好，Mike，请您分享一个例子，说明您是如何在Ionic 2+中实现此功能的，我正在努力实现此功能（遵循Videogular2指南），并希望了解您是如何实现此功能的。先谢谢你，奥利弗

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

import {VgAPI } from 'videogular2/core';

export class MyPage{

api:VgAPI;

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