Cómo usar y optimizar videos

Esta página describe cómo usar videos con aplicaciones Next.js, mostrando cómo almacenar y mostrar archivos de video sin afectar el rendimiento.

Uso de <video> y <iframe>

Los videos pueden incrustarse en la página usando la etiqueta HTML <video> para archivos de video directos y <iframe> para videos alojados en plataformas externas.

<video>

La etiqueta HTML <video> puede incrustar contenido de video autohospedado o servido directamente, permitiendo control total sobre la reproducción y apariencia.

export function Video() {
  return (
    <video width="320" height="240" controls preload="none">
      <source src="/path/to/video.mp4" type="video/mp4" />
      <track
        src="/path/to/captions.vtt"
        kind="subtitles"
        srcLang="en"
        label="English"
      />
      Your browser does not support the video tag.
    </video>
  )
}

Atributos comunes de la etiqueta <video>

Nota importante: Al usar el atributo autoPlay, es importante incluir también el atributo muted para asegurar que el video se reproduzca automáticamente en la mayoría de navegadores y el atributo playsInline para compatibilidad con dispositivos iOS.

Para una lista completa de atributos de video, consulta la documentación de MDN.

Mejores prácticas para videos

• Contenido alternativo: Al usar la etiqueta <video>, incluye contenido alternativo dentro de la etiqueta para navegadores que no admiten reproducción de video.
• Subtítulos o leyendas: Incluye subtítulos o leyendas para usuarios sordos o con dificultades auditivas. Utiliza la etiqueta <track> con tus elementos <video> para especificar fuentes de archivos de subtítulos.
• Controles accesibles: Se recomiendan los controles estándar de video HTML5 para navegación por teclado y compatibilidad con lectores de pantalla. Para necesidades avanzadas, considera reproductores de terceros como react-player o video.js, que ofrecen controles accesibles y experiencia consistente entre navegadores.

<iframe>

La etiqueta HTML <iframe> te permite incrustar videos de plataformas externas como YouTube o Vimeo.

export default function Page() {
  return (
    <iframe src="https://www.youtube.com/embed/19g66ezsKAg" allowFullScreen />
  )
}

Atributos comunes de la etiqueta <iframe>

Para una lista completa de atributos de iframe, consulta la documentación de MDN.

Elección del método de incrustación de video

Hay dos formas de incrustar videos en tu aplicación Next.js:

• Videos autohospedados o archivos de video directos: Incrusta videos autohospedados usando la etiqueta <video> para escenarios que requieren control detallado sobre la funcionalidad y apariencia del reproductor. Este método de integración dentro de Next.js permite personalización y control de tu contenido de video.
• Uso de servicios de alojamiento de video (YouTube, Vimeo, etc.): Para servicios de alojamiento de video como YouTube o Vimeo, incrustarás sus reproductores basados en iframe usando la etiqueta <iframe>. Aunque este método limita cierto control sobre el reproductor, ofrece facilidad de uso y características proporcionadas por estas plataformas.

Elige el método de incrustación que se alinee con los requisitos de tu aplicación y la experiencia de usuario que deseas ofrecer.

Incrustación de videos alojados externamente

Para incrustar videos de plataformas externas, puedes usar Next.js para obtener la información del video y React Suspense para manejar el estado de carga mientras se carga.

1. Crear un Componente de Servidor para la incrustación de video

El primer paso es crear un Componente de Servidor que genere el iframe apropiado para incrustar el video. Este componente obtendrá la URL de origen del video y renderizará el iframe.

export default async function VideoComponent() {
  const src = await getVideoSrc()

  return <iframe src={src} allowFullScreen />
}

2. Transmitir el componente de video usando React Suspense

Después de crear el Componente de Servidor para incrustar el video, el siguiente paso es transmitir el componente usando React Suspense.

import { Suspense } from 'react'
import VideoComponent from '../ui/VideoComponent.jsx'

export default function Page() {
  return (
    <section>
      <Suspense fallback={<p>Cargando video...</p>}>
        <VideoComponent />
      </Suspense>
      {/* Otro contenido de la página */}
    </section>
  )
}

Nota importante: Al incrustar videos de plataformas externas, considera las siguientes mejores prácticas:

• Asegúrate de que las incrustaciones de video sean responsivas. Usa CSS para que el iframe o reproductor de video se adapte a diferentes tamaños de pantalla.
• Implementa estrategias para cargar videos basadas en condiciones de red, especialmente para usuarios con planes de datos limitados.

Este enfoque resulta en una mejor experiencia de usuario ya que evita que la página se bloquee, lo que significa que el usuario puede interactuar con la página mientras el componente de video se transmite.

Para una experiencia de carga más atractiva e informativa, considera usar un esqueleto de carga como interfaz de usuario de respaldo. En lugar de mostrar un simple mensaje de carga, puedes mostrar un esqueleto que se asemeje al reproductor de video así:

import { Suspense } from 'react'
import VideoComponent from '../ui/VideoComponent.jsx'
import VideoSkeleton from '../ui/VideoSkeleton.jsx'

export default function Page() {
  return (
    <section>
      <Suspense fallback={<VideoSkeleton />}>
        <VideoComponent />
      </Suspense>
      {/* Otro contenido de la página */}
    </section>
  )
}

Videos autohospedados

Autohospedar videos puede ser preferible por varias razones:

• Control completo e independencia: Autohospedar te da gestión directa sobre tu contenido de video, desde la reproducción hasta la apariencia, asegurando propiedad total y control, libre de restricciones de plataformas externas.
• Personalización para necesidades específicas: Ideal para requisitos únicos, como videos de fondo dinámicos, permite personalización a medida para alinearse con necesidades de diseño y funcionales.
• Consideraciones de rendimiento y escalabilidad: Elige soluciones de almacenamiento que sean tanto de alto rendimiento como escalables, para soportar tráfico creciente y tamaño de contenido efectivamente.
• Costo e integración: Equilibra los costos de almacenamiento y ancho de banda con la necesidad de integración fácil en tu framework Next.js y ecosistema tecnológico más amplio.

Uso de Vercel Blob para alojamiento de videos

Vercel Blob ofrece una forma eficiente de alojar videos, proporcionando una solución de almacenamiento en la nube escalable que funciona bien con Next.js. Así es como puedes alojar un video usando Vercel Blob:

1. Subiendo un video a Vercel Blob

En tu panel de Vercel, navega a la pestaña "Storage" y selecciona tu tienda Vercel Blob. En la esquina superior derecha de la tabla Blob, encuentra y haz clic en el botón "Upload". Luego, elige el archivo de video que deseas subir. Una vez completada la subida, el archivo de video aparecerá en la tabla Blob.

Alternativamente, puedes subir tu video usando una acción de servidor. Para instrucciones detalladas, consulta la documentación de Vercel sobre subidas desde el servidor. Vercel también soporta subidas desde el cliente. Este método puede ser preferible para ciertos casos de uso.

2. Mostrando el video en Next.js

Una vez que el video está subido y almacenado, puedes mostrarlo en tu aplicación Next.js. Aquí hay un ejemplo de cómo hacer esto usando la etiqueta <video> y React Suspense:

import { Suspense } from 'react'
import { list } from '@vercel/blob'

export default function Page() {
  return (
    <Suspense fallback={<p>Cargando video...</p>}>
      <VideoComponent fileName="my-video.mp4" />
    </Suspense>
  )
}

async function VideoComponent({ fileName }) {
  const { blobs } = await list({
    prefix: fileName,
    limit: 1,
  })
  const { url } = blobs[0]

  return (
    <video controls preload="none" aria-label="Reproductor de video">
      <source src={url} type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  )
}

En este enfoque, la página usa la URL @vercel/blob del video para mostrar el video usando el VideoComponent. React Suspense se usa para mostrar un respaldo hasta que se obtiene la URL del video y el video está listo para mostrarse.

Añadiendo subtítulos a tu video

Si tienes subtítulos para tu video, puedes añadirlos fácilmente usando el elemento <track> dentro de tu etiqueta <video>. Puedes obtener el archivo de subtítulos desde Vercel Blob de manera similar al archivo de video. Así es como puedes actualizar el <VideoComponent> para incluir subtítulos.

async function VideoComponent({ fileName }) {
  const { blobs } = await list({
    prefix: fileName,
    limit: 2,
  })
  const { url } = blobs[0]
  const { url: captionsUrl } = blobs[1]

  return (
    <video controls preload="none" aria-label="Reproductor de video">
      <source src={url} type="video/mp4" />
      <track src={captionsUrl} kind="subtitles" srcLang="en" label="English" />
      Your browser does not support the video tag.
    </video>
  )
}

Siguiendo este enfoque, puedes autohospedar e integrar videos efectivamente en tus aplicaciones Next.js.

Recursos

Para continuar aprendiendo más sobre optimización de videos y mejores prácticas, consulta los siguientes recursos:

• Entendiendo formatos y códecs de video: Elige el formato y códec correctos, como MP4 para compatibilidad o WebM para optimización web, para tus necesidades de video. Para más detalles, consulta la guía de Mozilla sobre códecs de video.
• Compresión de video: Usa herramientas como FFmpeg para comprimir videos efectivamente, equilibrando calidad con tamaño de archivo. Aprende sobre técnicas de compresión en el sitio web oficial de FFmpeg.
• Ajuste de resolución y tasa de bits: Ajusta resolución y tasa de bits basado en la plataforma de visualización, con configuraciones más bajas para dispositivos móviles.
• Redes de Entrega de Contenido (CDNs): Utiliza una CDN para mejorar la velocidad de entrega de video y manejar alto tráfico. Al usar algunas soluciones de almacenamiento, como Vercel Blob, la funcionalidad CDN se maneja automáticamente para ti. Aprende más sobre CDNs y sus beneficios.

Explora estas plataformas de transmisión de video para integrar video en tus proyectos Next.js:

Componente de código abierto next-video

• Proporciona un componente <Video> para Next.js, compatible con varios servicios de alojamiento incluyendo Vercel Blob, S3, Backblaze y Mux.
• Documentación detallada para usar next-video.dev con diferentes servicios de alojamiento.

Integración con Cloudinary

• Documentación y guía de integración oficial para usar Cloudinary con Next.js.
• Incluye un componente <CldVideoPlayer> para soporte de video inmediato.
• Encuentra ejemplos de integración de Cloudinary con Next.js incluyendo Transmisión de Tasa de Bits Adaptativa.
• Otras bibliotecas de Cloudinary incluyendo un SDK para Node.js también están disponibles.

API de Video Mux

• Mux proporciona una plantilla de inicio para crear un curso de video con Mux y Next.js.
• Aprende sobre las recomendaciones de Mux para incrustar video de alto rendimiento para tu aplicación Next.js.
• Explora un proyecto de ejemplo demostrando Mux con Next.js.

Fastly

• Aprende más sobre integración de soluciones de Fastly para video bajo demanda y transmisión de medios en Next.js.

Integración con ImageKit.io

• Consulte la guía de inicio rápido oficial para integrar ImageKit con Next.js.
• La integración incluye un componente <IKVideo>, que ofrece soporte perfecto para videos.
• También puede explorar otras bibliotecas de ImageKit, como el SDK para Node.js, que también está disponible.