npm package: @padhariyavishal/jw-player
Description: JW Player using typescript for react or react based frameworks.
Author: Vishal Padhariya
Latest version: 1.0.3

# JW Player

JW Player Component using typescript for react or react based frameworks.

## Installation

To install the package, use npm:

```sh
npm install @padhariyavishal/jw-player
```

# Usage

To use the JWPlayer Component in your React or Next.js project, follow these steps:

## Example

***Javascript based example:***

```bash
import { JWPlayer } from "@padhariyavishal/jw-player";

const MyPlayer = () => {
    const playerConfig = {
        elementId: 'my-player',
        licenseKey: 'YOUR_LICENSE_KEY',
        playlist: [
            {
                file: 'https://example.com/path/to/your/video1.mp4',
                image: 'https://example.com/path/to/your/thumbnail1.jpg',
                title: 'Video 1',
                description: 'Description for Video 1'
            },
            {
                file: 'https://example.com/path/to/your/video2.mp4',
                image: 'https://example.com/path/to/your/thumbnail2.jpg',
                title: 'Video 2',
                description: 'Description for Video 2'
            }
        ],
        width: '640',
        height: '360'
    };

    return (
        <div>
            <h1>Welcome to My JW Player Page</h1>
            <JWPlayer {...playerConfig} />
        </div>
    );
};

export default MyPlayer;
```

***TypeScript based example:***

```bash
import { JWPlayer,JWPlayerConfig } from "@padhariyavishal/jw-player";

const MyPlayer: React.FC = () => {
    const playerConfig: JWPlayerConfig = {
        elementId: 'my-player',
        licenseKey: 'YOUR_LICENSE_KEY',
        playlist: [
            {
                file: 'https://example.com/path/to/your/video1.mp4',
                image: 'https://example.com/path/to/your/thumbnail1.jpg',
                title: 'Video 1',
                description: 'Description for Video 1'
            },
            {
                file: 'https://example.com/path/to/your/video2.mp4',
                image: 'https://example.com/path/to/your/thumbnail2.jpg',
                title: 'Video 2',
                description: 'Description for Video 2'
            }
        ],
        width: '640',
        height: '360'
    };

    return (
        <div>
            <h1>Welcome to My JW Player Page</h1>
            <JWPlayer {...playerConfig} />
        </div>
    );
};

export default MyPlayer;
```
# Props

`JWPlayerConfig`

| Property | Type | Description |
|:----------:|:------:|:------------------------------------------------------------:|
| elementId | string | The ID of the DOM element where the player will be embedded. |
| licenseKey | string | Your JW Player license key. |
| videoUrl | string | The URL of the video to play (if not using a playlist). |
| thumbnailUrl | string | The URL of the thumbnail image (if not using a playlist). |
| playlist | Array | An array of playlist items (each item should have file, image, title, and description). |
| width | string | The width of the player (default is '640'). |
| height | string | The height of the player (default is '360'). |
| title | string | The title of the video (if not using a playlist). |
| description | string | The description of the video (if not using a playlist). |
| autostart | boolean | Whether to automatically start the video (default is false). |
| repeat | boolean | Whether to repeat the video (default is false). |
| controls | boolean | Whether to show player controls (default is true). |
| mute | boolean | Whether to mute the video (default is false). |
| advertising | object | Advertising configuration object. |


`PlaylistItem`

| Property | Type | Description |
|:----------:|:------:|:------------------------------------------------------------:|
| file | string | The URL of the video file. |
| image | string | The URL of the thumbnail image. |
| title | string | The title of the video. |
| description | string | The description of the video. |