JW Player

JW Player Component using typescript for react or react based frameworks.

Installation

To install the package, use npm:

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:

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:

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. |