4

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.

Nitin yadav
  • 194
  • 2
  • 8

2 Answers2

5

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.

Cuong Le Ngoc
  • 11,595
  • 2
  • 17
  • 39
Ludwig
  • 1,242
  • 10
  • 8
4

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

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

Rafael S. Fijalkowski
  • 625
  • 7
  • 13
  • How did you manage to import the player js file? (content.jwplatform.com/libraries/xxxx.js) – Enrico Dec 19 '18 at 12:41
  • 1
    @Enrico I have it in my "index.html" file. Like: ` ` – Rafael S. Fijalkowski Dec 19 '18 at 16:11
  • This example works great. However, jwplayer.key is publicly viewable as its directly added under index.html. Is there any way to programatically recive the same under typescript itself from database? – Nikhil Feb 13 '19 at 03:22
  • I don't understand how this works, I get "ReferenceError: jwplayer is not defined" and it's quite logic to get that... how do you have that object reference only from this declaration: declare var jwplayer:any; – Ovy.Istrate May 25 '20 at 19:47