How to add Video Player in Next.js ? (original) (raw)

Last Updated : 25 Jul, 2024

Adding a video player in a Next.js application enhances the user experience by enabling video playback. The react-player library simplifies integrating various video sources such as YouTube, Vimeo, and local files. In this article, we are going to learn how we can add Video Player in NextJS.

**Approach

To add a Video Player in Next.js, we will use the react-player package. This package allows us to easily embed a video player anywhere in our app. First, install the react-player package using npm install react-player. Then, import and use the ReactPlayer component on your homepage to add a video player.

**Steps to Create NextJS App

**Step 1: Initialize a new Next.js project using the below command:

npx create-next-app gfg

**Step 2: Install the required package:

Now we will install the react-player package using the below command:

npm i react-player

**Project Structure: It will look like this.

The updated dependencies in the package.json file are:

"dependencies": {
"next": "14.2.4",
"react": "^18",
"react-dom": "^18",
"react-player": "^2.16.0",
}

**Example: This example demonstrates add a video player in the next.js application with the help of react-play npm package.

JavaScript `

// Filename - index.js

import React from 'react' import ReactPlayer from 'react-player'

export default function VideoPlayer(){ return (

`

**Explanation: In the above example first, we are importing our ReactPlayer component from the installed package. After that, we are using the ReactPlayer component inside a new function. We can enter the link of the video that we want to play.

**Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

**Output: