如何在Ionic 2/Angular 2项目中实现Videogular?
问题描述:
我正在寻找一个在Ionic 2环境中工作的Videogular 2,甚至是一个平坦的Angular 2环境的工作示例。如何在Ionic 2/Angular 2项目中实现Videogular?
我已经尝试了许多不同的在线示例,感觉就像文档过时或完全不准确。
例如,文件明确指出,一个基本的玩家可以与生产:
<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/[email protected]/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)和Videogular2。
<videogular>
是从VG1 LIB(在http://www.videogular.com/找到)
您正在寻找回购是在这里:https://github.com/videogular/videogular2, 和文档链接到自述 - 使用这些。
请按照这些文档中的入门指南并避免使用videogular.com(vg1)网站,您将快速了解差异情况,以避免在线参考v1。希望这可以帮助!
您好迈克你可以请分享一个例子,你如何能够得到这个在Ionic 2+中的工作,我正努力实现这一点(跟随Videogular2指南),并希望看到你如何能够得到它加工。预先感谢奥利弗 –