En este artículo, vamos a aprender cómo podemos agregar un reproductor de video en NextJs. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac.
Enfoque: para agregar nuestro reproductor de video, vamos a usar el paquete react-player. El paquete react-player nos ayuda a agregar un reproductor de video en cualquier lugar de nuestra aplicación. Primero, instalaremos el paquete react-player y luego agregaremos un reproductor de video en nuestra página de inicio.
Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:
npx create-next-app gfg
Instale el paquete requerido: ahora instalaremos el paquete react-player usando el siguiente comando:
npm i react-player
Estructura del proyecto: Se verá así.
Agregar el reproductor de video: después de instalar el paquete, podemos agregar fácilmente el reproductor de video a nuestra aplicación. Para este ejemplo, vamos a agregar un reproductor de video a nuestra página de inicio.
index.js
import React from 'react'
import ReactPlayer from 'react-player'
export default function VideoPlayer(){
return (
<div>
<h2>NextJs VideoPlayer - GeeksforGeeks</h2>
<ReactPlayer url='https://www.youtube.com/watch?v=wWgIAphfn2U' />
</div>
)
}
Explicación: en el ejemplo anterior primero, estamos importando nuestro componente ReactPlayer desde el paquete instalado. Después de eso, estamos usando el componente ReactPlayer dentro de una nueva función. Podemos introducir el enlace del vídeo que queremos reproducir.
Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.
npm run dev
Producción:
Publicación traducida automáticamente
Artículo escrito por imranalam21510 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA