Comment utiliser et optimiser les vidéos

Cette page explique comment utiliser des vidéos avec des applications Next.js, en montrant comment stocker et afficher des fichiers vidéo sans affecter les performances.

Utilisation de <video> et <iframe>

Les vidéos peuvent être intégrées dans la page en utilisant la balise HTML <video> pour les fichiers vidéo directs et <iframe> pour les vidéos hébergées sur des plateformes externes.

<video>

La balise HTML <video> permet d'intégrer du contenu vidéo auto-hébergé ou servi directement, offrant un contrôle total sur la lecture et l'apparence.

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"
      />
      Votre navigateur ne prend pas en charge la balise vidéo.
    </video>
  )
}

Attributs courants de la balise <video>

Bon à savoir : Lorsque vous utilisez l'attribut autoPlay, il est important d'inclure également l'attribut muted pour garantir que la vidéo se lance automatiquement dans la plupart des navigateurs, ainsi que l'attribut playsInline pour une compatibilité avec les appareils iOS.

Pour une liste complète des attributs vidéo, consultez la documentation MDN.

Bonnes pratiques pour les vidéos

• Contenu de secours : Lorsque vous utilisez la balise <video>, incluez un contenu de secours à l'intérieur de la balise pour les navigateurs qui ne prennent pas en charge la lecture vidéo.
• Sous-titres ou légendes : Incluez des sous-titres ou des légendes pour les utilisateurs sourds ou malentendants. Utilisez la balise <track> avec vos éléments <video> pour spécifier les sources des fichiers de sous-titres.
• Contrôles accessibles : Les contrôles vidéo HTML5 standard sont recommandés pour la navigation au clavier et la compatibilité avec les lecteurs d'écran. Pour des besoins avancés, envisagez des lecteurs tiers comme react-player ou video.js, qui offrent des contrôles accessibles et une expérience cohérente entre les navigateurs.

<iframe>

La balise HTML <iframe> permet d'intégrer des vidéos provenant de plateformes externes comme YouTube ou Vimeo.

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

Attributs courants de la balise <iframe>

Pour une liste complète des attributs iframe, consultez la documentation MDN.

Choix d'une méthode d'intégration vidéo

Il existe deux façons d'intégrer des vidéos dans votre application Next.js :

• Vidéos auto-hébergées ou fichiers vidéo directs : Intégrez des vidéos auto-hébergées en utilisant la balise <video> pour les scénarios nécessitant un contrôle détaillé sur la fonctionnalité et l'apparence du lecteur. Cette méthode d'intégration dans Next.js permet une personnalisation et un contrôle de votre contenu vidéo.
• Utilisation de services d'hébergement vidéo (YouTube, Vimeo, etc.) : Pour les services d'hébergement vidéo comme YouTube ou Vimeo, vous intégrerez leurs lecteurs basés sur iframe en utilisant la balise <iframe>. Bien que cette méthode limite certains contrôles sur le lecteur, elle offre une facilité d'utilisation et des fonctionnalités fournies par ces plateformes.

Choisissez la méthode d'intégration qui correspond aux exigences de votre application et à l'expérience utilisateur que vous souhaitez offrir.

Intégration de vidéos hébergées en externe

Pour intégrer des vidéos provenant de plateformes externes, vous pouvez utiliser Next.js pour récupérer les informations de la vidéo et React Suspense pour gérer l'état de secours pendant le chargement.

1. Créer un composant serveur pour l'intégration vidéo

La première étape consiste à créer un composant serveur qui génère l'iframe approprié pour intégrer la vidéo. Ce composant récupérera l'URL source de la vidéo et affichera l'iframe.

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

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

2. Diffuser le composant vidéo avec React Suspense

Après avoir créé le composant serveur pour intégrer la vidéo, l'étape suivante consiste à diffuser le composant en utilisant React Suspense.

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

export default function Page() {
  return (
    <section>
      <Suspense fallback={<p>Chargement de la vidéo...</p>}>
        <VideoComponent />
      </Suspense>
      {/* Autre contenu de la page */}
    </section>
  )
}

Bon à savoir : Lors de l'intégration de vidéos provenant de plateformes externes, tenez compte des bonnes pratiques suivantes :

• Assurez-vous que les intégrations vidéo sont réactives. Utilisez CSS pour que l'iframe ou le lecteur vidéo s'adapte à différentes tailles d'écran.
• Mettez en œuvre des stratégies de chargement des vidéos en fonction des conditions réseau, en particulier pour les utilisateurs avec des forfaits de données limités.

Cette approche offre une meilleure expérience utilisateur car elle empêche le blocage de la page, ce qui signifie que l'utilisateur peut interagir avec la page pendant que le composant vidéo se charge.

Pour une expérience de chargement plus engageante et informative, envisagez d'utiliser un squelette de chargement comme interface de secours. Ainsi, au lieu d'afficher un simple message de chargement, vous pouvez afficher un squelette ressemblant au lecteur vidéo, comme ceci :

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>
      {/* Autre contenu de la page */}
    </section>
  )
}

Vidéos auto-hébergées

L'auto-hébergement des vidéos peut être préférable pour plusieurs raisons :

• Contrôle total et indépendance : L'auto-hébergement vous donne une gestion directe de votre contenu vidéo, de la lecture à l'apparence, garantissant une propriété et un contrôle complets, sans contraintes des plateformes externes.
• Personnalisation pour des besoins spécifiques : Idéal pour des besoins uniques, comme des vidéos d'arrière-plan dynamiques, il permet une personnalisation sur mesure pour s'aligner sur les besoins de conception et fonctionnels.
• Considérations de performance et d'évolutivité : Choisissez des solutions de stockage à la fois performantes et évolutives, pour supporter efficacement une augmentation du trafic et de la taille du contenu.
• Coût et intégration : Équilibrez les coûts de stockage et de bande passante avec le besoin d'une intégration facile dans votre framework Next.js et un écosystème technologique plus large.

Utilisation de Vercel Blob pour l'hébergement vidéo

Vercel Blob offre un moyen efficace d'héberger des vidéos, fournissant une solution de stockage cloud évolutive qui fonctionne bien avec Next.js. Voici comment vous pouvez héberger une vidéo avec Vercel Blob :

1. Téléchargement d'une vidéo vers Vercel Blob

Dans votre tableau de bord Vercel, naviguez vers l'onglet "Stockage" et sélectionnez votre magasin Vercel Blob. Dans le coin supérieur droit du tableau Blob, trouvez et cliquez sur le bouton "Télécharger". Ensuite, choisissez le fichier vidéo que vous souhaitez télécharger. Une fois le téléchargement terminé, le fichier vidéo apparaîtra dans le tableau Blob.

Alternativement, vous pouvez télécharger votre vidéo en utilisant une action serveur. Pour des instructions détaillées, référez-vous à la documentation Vercel sur les téléchargements côté serveur. Vercel prend également en charge les téléchargements côté client. Cette méthode peut être préférable pour certains cas d'utilisation.

2. Affichage de la vidéo dans Next.js

Une fois la vidéo téléchargée et stockée, vous pouvez l'afficher dans votre application Next.js. Voici un exemple de comment faire cela en utilisant la balise <video> et React Suspense :

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

export default function Page() {
  return (
    <Suspense fallback={<p>Chargement de la vidéo...</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="Lecteur vidéo">
      <source src={url} type="video/mp4" />
      Votre navigateur ne prend pas en charge la balise vidéo.
    </video>
  )
}

Dans cette approche, la page utilise l'URL @vercel/blob de la vidéo pour l'afficher en utilisant le VideoComponent. React Suspense est utilisé pour afficher un contenu de secours jusqu'à ce que l'URL de la vidéo soit récupérée et que la vidéo soit prête à être affichée.

Ajout de sous-titres à votre vidéo

Si vous avez des sous-titres pour votre vidéo, vous pouvez facilement les ajouter en utilisant l'élément <track> à l'intérieur de votre balise <video>. Vous pouvez récupérer le fichier de sous-titres depuis Vercel Blob de la même manière que le fichier vidéo. Voici comment vous pouvez mettre à jour le <VideoComponent> pour inclure des sous-titres.

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="Lecteur vidéo">
      <source src={url} type="video/mp4" />
      <track src={captionsUrl} kind="subtitles" srcLang="en" label="English" />
      Votre navigateur ne prend pas en charge la balise vidéo.
    </video>
  )
}

En suivant cette approche, vous pouvez efficacement auto-héberger et intégrer des vidéos dans vos applications Next.js.

Ressources

Pour continuer à en apprendre davantage sur l'optimisation vidéo et les bonnes pratiques, consultez les ressources suivantes :

• Compréhension des formats et codecs vidéo : Choisissez le bon format et codec, comme MP4 pour la compatibilité ou WebM pour l'optimisation web, pour vos besoins vidéo. Pour plus de détails, voir le guide Mozilla sur les codecs vidéo.
• Compression vidéo : Utilisez des outils comme FFmpeg pour compresser efficacement les vidéos, en équilibrant qualité et taille de fichier. Apprenez-en plus sur les techniques de compression sur le site officiel de FFmpeg.
• Ajustement de la résolution et du débit binaire : Ajustez la résolution et le débit binaire en fonction de la plateforme de visualisation, avec des paramètres plus bas pour les appareils mobiles.
• Réseaux de diffusion de contenu (CDN) : Utilisez un CDN pour améliorer la vitesse de diffusion vidéo et gérer un trafic élevé. Lorsque vous utilisez certaines solutions de stockage, comme Vercel Blob, la fonctionnalité CDN est automatiquement gérée pour vous. En savoir plus sur les CDN et leurs avantages.

Explorez ces plateformes de streaming vidéo pour intégrer des vidéos dans vos projets Next.js :

Composant open source next-video

• Fournit un composant <Video> pour Next.js, compatible avec divers services d'hébergement, y compris Vercel Blob, S3, Backblaze et Mux.
• Documentation détaillée pour utiliser next-video.dev avec différents services d'hébergement.

Intégration avec Cloudinary

• Documentation officielle et guide d'intégration pour utiliser Cloudinary avec Next.js.
• Inclut un composant <CldVideoPlayer> pour une prise en charge vidéo facile.
• Trouvez des exemples d'intégration de Cloudinary avec Next.js, y compris la diffusion adaptative en fonction du débit.
• D'autres bibliothèques Cloudinary, y compris un SDK Node.js, sont également disponibles.

API vidéo Mux

• Mux fournit un modèle de démarrage pour créer un cours vidéo avec Mux et Next.js.
• Découvrez les recommandations de Mux pour intégrer des vidéos haute performance dans votre application Next.js.
• Explorez un projet exemple démontrant Mux avec Next.js.

Fastly

• En savoir plus sur l'intégration des solutions de Fastly pour la vidéo à la demande et le streaming média dans Next.js.

Intégration avec ImageKit.io

• Consultez le guide de démarrage rapide officiel pour intégrer ImageKit avec Next.js.
• L'intégration fournit un composant <IKVideo>, offrant une prise en charge transparente des vidéos.
• Vous pouvez également explorer d'autres bibliothèques ImageKit, comme le SDK Node.js, qui est également disponible.