Аудио и видео

Аудио- и видеофайлы (.mp3, .wav, .ogg, .mp4, .webm и др.) в React-приложениях импортируются так же, как изображения: через import. Сборщик (Webpack или Vite) копирует файл в папку сборки, добавляет хеш к имени и возвращает строку с корректным путём, который можно использовать в элементах <audio> и <video>.

Как импортировать аудио или видео

import clickSound from './assets/sounds/click.mp3';
import introVideo from './assets/videos/intro.mp4';

function MediaPlayer() {
  return (
    <>
      <audio controls src={clickSound} />
      <video controls src={introVideo} width="640" />
    </>
  );
}

Переменные clickSound и introVideo содержат абсолютные пути к скомпилированным файлам (например, /static/media/click.a1b2c3.mp3). Это гарантирует, что файлы будут включены в сборку и доступны в продакшене.

Почему нельзя использовать строку напрямую

Запись вида <audio src="./assets/sounds/click.mp3" /> не работает после сборки, потому что:

  • Сборщик не распознаёт строку как зависимость,
  • Файл не копируется в папку dist/ или build/,
  • В браузере возникает ошибка 404.

Только импорт через import делает файл частью зависимостей приложения.

Ограничения и рекомендации

  • Размер файлов: аудио и видео часто имеют большой объём. Сборщик может встроить очень маленькие файлы прямо в JavaScript-бандл (base64), но для больших файлов всегда создаётся отдельный ресурс. Уточните настройки assetSizeLimit в конфигурации сборщика, если нужно изменить это поведение.
  • Форматы: используйте современные и эффективные форматы:
    • Аудио: .mp3 (широкая поддержка) или .ogg (лучшее сжатие),
    • Видео: .mp4 с кодеком H.264 (универсальный) или .webm (лучшее сжатие для веба).
  • Загрузка по требованию: для больших видео рассмотрите ленивую загрузку или размещение на CDN, чтобы не увеличивать размер начальной сборки.
  • Путь к файлу: всегда используйте относительные пути при импорте (начинаются с ./ или ../).

Импорт через import — единственный надёжный способ подключить медиафайлы, управляемые сборщиком.