How to Integrate JW Player with React or Next.js: A Step-by-Step Guide

Are you looking for a video player that can seamlessly integrate with your React or Next.js app? Look no further than JW Player! With its easy-to-use SDK and support for pre-rolls, mid-rolls, and post-rolls ads, JW Player is the perfect choice for any video streaming platform.

In this tutorial, we’ll walk through how to integrate JW Player with your React or Next.js app, step by step.

Before we get started, make sure that you have a basic understanding of React and Next.js. This tutorial assumes that you are familiar with these technologies and have a basic understanding of how they work.

First, let’s take a look at some of the benefits of using JW Player with React or Next.js:

Easy-to-use SDK: JW Player’s SDK is well-documented and easy to use, making it a great choice for developers of any skill level.
Ad support: JW Player supports pre-rolls, mid-rolls, and post-rolls, making it a great choice for video streaming platforms that rely on advertising revenue.
Customizable player: JW Player’s player is highly customizable, making it easy to add your own branding and design elements.

Now that you know why you should use JW Player with React or Next.js, let’s dive into how to actually set it up.

To get started, you’ll need to create a JW Player account and set up a player. Here’s how to do it:

Sign up for a free JW Player account here.
Once you’ve signed up, log in to your JW Player account.
Click on the “Players” tab in the left-hand menu.
Click the “Create Player” button.
Give your player a name and select any customizations you want to apply.
Click the “Save” button.

Once you’ve set up your player, you’ll need to include the JW Player script in your React or Next.js app.

Here’s how to include the JW Player script in your React or Next.js app

In React — Add the following script tag to your index.html file:

<script src="https://cdn.jwplayer.com/libraries/YOUR_PLAYER_ID.js"></script>

In Next.js, create a _document.js file and add the following script tag inside the <Head> Tag

<Html>
      <Head>
        {/* jw player script */}
        <Script
          id="jw-player"
          strategy="afterInteractive"
          src="https://cdn.jwplayer.com/libraries/YOUR_PLAYER_ID.js"
        ></Script>
        {/* end jw player script 
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
 </Html>

Make sure you replace YOUR_PLAYER_ID with your actual player ID.

In your component file, create a new div with a ref

import { useEffect, useRef } from 'react';

const VideoPlayer = ({ video }) => {
  const playerRef = useRef(null);

  useEffect(() => {
    if (playerRef.current && typeof window !== "undefined") {
      window.jwplayer(playerRef.current).setup({
        file: video.sourceUrl,
        width: '100%',
        aspectratio: '16:9',
      });
    }
  }, [video]);

  return <div ref={playerRef}></div>;
};

export default VideoPlayer;

This component creates a new div element with a playerRef ref, which will be used to initialize the JW Player instance.

Use the VideoPlayer the component in your app to display videos:

import VideoPlayer from './VideoPlayer';

const video = {
  sourceUrl: 'https://cdn.jwplayer.com/manifests/EXAMPLE.m3u8',
};

const App = () => {
  return <VideoPlayer video={video} />;
};

export default App;

You should see your video player playing if you properly follow all the instructions.