Integrate JW Player in Angular 4

Question

I'm new to angular. I want to know how to integrate JWPlayer in my angular 4 project.I have already imported src of jwplayer.js in .angular-cli.json. Thank You.

Answer 1

First you have to make it visible in your Angular project by adding a type definition:

declare var jwplayer: any;

You can add this type definition either in the component ts-file or in the typings.d.ts file.

Then add the div to your component like that:

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

Then in the component add the code e.g. in the ngOnInit function:

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

If the import through angular-cli.json does not work you can also add a script tag to the head area of your index.html and load it there directly.

Answer 2

Based on the @ludwig solution. Here you can try it on Stackblitz.

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