CODEWITHSUNDEEP
angularangular2-servicesjwplayerjwplayer6jwplayer7
Nitin yadav
Nitin yadav

Reputation: 214

Integrate JW Player in Angular 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.

Upvotes: 4

Views: 5267

Answers (2)

Ludwig
Ludwig

Reputation: 1272

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.

Upvotes: 5

Rafael S. Fijalkowski
Rafael S. Fijalkowski

Reputation: 666

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

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

Upvotes: 4

Related Questions