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

I am seeking a working example of Videogular 2 working in an Ionic 2 environment, or even a flat Angular 2 environment.

我正在寻找一个在Ionic 2环境中工作的Videogular 2的工作示例,甚至是平面Angular 2环境。

I have tried many different online examples and it feels like the docs are way out of date or totally inaccurate.

我尝试了许多不同的在线示例,感觉文档已过时或完全不准确。

For example, docs clearly state that a basic player can be produced with:

例如,文档明确指出可以使用以下方式生成基本播放器:

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

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

Which I am loading in Typescript:

我在Typescript中加载:

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

This gives me the error:

这给了我错误:

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

I have a little success using a vg-player element instead of videogular and then a video tag within. This works, but just gives me the native player. Any attempt to use Videogular tags within it will give me a similar error to the above.

我有一点成功使用vg-player元素而不是视频,然后是视频标签。这有效,但只是给了我本地玩家。任何在其中使用视频标签的尝试都会给我一个类似的错误。

All components are also present in my app.module.ts file under the imports area.

所有组件也出现在导入区域下的app.module.ts文件中。

My full controller:

我的完全控制器:

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

}

And my full HTML:

我的完整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>

Any help is greatly appreciated. At this point I'm considering other video options, but would love to stick with Videogular as it seems like a great solution, if I can get it to work.

任何帮助是极大的赞赏。在这一点上,我正在考虑其他视频选项,但是如果我可以使用它,它会喜欢坚持使用Videogular,因为它似乎是一个很好的解决方案。

2 个解决方案

#1

Note that if you prefer using lazy loading , you need not import the modules in you app.module.ts . Simply lazy load it in the page module ts

请注意,如果您更喜欢使用延迟加载,则无需在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';
...

After installing videogular via npm , If you use lazy loading and i presume you are , import these modules from videogular2 in your page.module.ts

通过npm安装视频目录后,如果你使用延迟加载并且我认为你是,请从你的page.module.ts中的videogular2导入这些模块。

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

VgAPI is the core api for almost all controls

VgAPI是几乎所有控件的核心API

in your html file

在你的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>

in your component.ts file

在你的component.ts文件中

import {VgAPI } from 'videogular2/core';

export class MyPage{

api:VgAPI;

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

Follow their documentation at site

在网站上关注他们的文档

#2

i have it working in Ionic2, and i like working with it with so far... it appears you are mixing Videogular(1) with Videogular2 in your code.

我有它在Ionic2工作,我喜欢与它一起工作到目前为止...看来你在你的代码中混合Videogular(1)和Videogular2。

<videogular> is from their vg1 lib (found at http://www.videogular.com/)

来自他们的vg1 lib(可在http://www.videogular.com/找到)

the repo you are looking for is here: https://github.com/videogular/videogular2, and the docs are linked to in the Readme - use these.

您正在寻找的仓库在这里:https://github.com/videogular/videogular2,文档链接到自述文件 - 使用这些。

Follow the Getting Started in these docs and avoid the videogular.com(vg1) site and you'll quickly learn to see the differences so you can avoid the online references to v1. Hope this helps!

按照这些文档中的入门并避开videogular.com(vg1)站点,您将很快学会查看差异,以避免在线引用v1。希望这可以帮助!