在Angular 4中集成JW Player

时间:2018-05-15 10:04:27

标签: angular angular2-services jwplayer jwplayer6 jwplayer7

我是棱角分明的新人。我想知道如何在我的angular 4项目中集成JWPlayer。我已经在.angular-cli.json中导入了jwplayer.js的src。 谢谢。

2 个答案:

答案 0 :(得分:3)

首先,您必须通过添加类型定义使其在Angular项目中可见:

declare var jwplayer: any;

您可以在组件ts文件或typings.d.ts文件中添加此类型定义。

然后将div添加到您的组件中:

<div id="myDiv">This text will be replaced with a player.</div>

然后在组件中添加代码,例如在ngOnInit函数中:

jwplayer("myDiv").setup({
"file": "http://example.com/myVideo.mp4",
"image": "http://example.com/myImage.png",
"height": 360,
"width": 640

});

如果通过angular-cli.json导入不起作用,您还可以在index.html的head区域添加一个脚本标记并直接将其加载到那里。

答案 1 :(得分:2)

基于@ludwig解决方案。在这里,您可以在Stackblitz上try it

https://stackblitz.com/edit/angular-yjasxx