在 Angular 4 中集成 JW Player

Question

我是角度的新手。我想知道如何将 JWPlayer 集成到我的 angular 4 项目中。我已经在 .angular-cli.json 中导入了 jwplayer.js 的 src。谢谢你。

Answer 1

首先，您必须通过添加类型定义使其在 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 的头部区域添加一个脚本标记并直接加载到那里。