在 Angular 4 中集成 JW Player答案

【问题标题】：Integrate JW Player in Angular 4在 Angular 4 中集成 JW Player
【发布时间】：2018-10-25 02:59:48
【问题描述】：

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

【问题讨论】：

标签： angular angular2-services jwplayer jwplayer6 jwplayer7

【解决方案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 的头部区域添加脚本标签并直接加载。

【讨论】：

非常感谢兄弟，真的很有帮助:)
您是如何设法从数据库中动态检索 jwplayer.key 而不是硬编码？

【解决方案2】：

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

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

【讨论】：

你是如何导入播放器 js 文件的？ (content.jwplatform.com/libraries/xxxx.js)
@Enrico 我的“index.html”文件中有它。喜欢：<html> <head> </head> <body> <app-root></app-root>  <script type="text/javascript" src="/assets/libs/jwplayer-7.12.3/jwplayer.js"></script> <script type="text/javascript">jwplayer.key="1D+blahblah/blahblah=="</script> </body> </html>
这个例子效果很好。但是，jwplayer.key 是公开可见的，因为它直接添加在 index.html 下。有没有办法以编程方式从数据库中接收打字稿本身的相同内容？
我不明白它是如何工作的，我得到“ReferenceError: jwplayer is not defined”，这是很合乎逻辑的......你如何只从这个声明中获得该对象引用：声明var jwplayer:any;