5

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

我在打字稿中加载：

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

4

2 回答 2

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 后，如果您使用延迟加载并且我认为您是，请从 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>

在您的 component.ts 文件中

import {VgAPI } from 'videogular2/core';

export class MyPage{

api:VgAPI;

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

按照他们在网站上的文档

于 2018-03-20T19:58:03.153 回答
0

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

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

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

遵循这些文档中的入门并避免使用 videogular.com(vg1) 站点，您将很快学会查看差异，因此您可以避免在线参考 v1。希望这可以帮助！

于 2017-07-18T17:31:58.857 回答