我正在寻找 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>
我正在用 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
文件中。
我的完整 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();
}
}
还有我的完整 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,因为它看起来是一个很好的解决方案,如果我能让它工作的话。
最佳答案
请注意,如果您更喜欢使用延迟加载,则无需在 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;
}
}
按照他们在 site 的文档
关于javascript - 如何在 Ionic 2/Angular 2 项目中实现 Videogular?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45162629/