Оптимизация видео

На этой странице описано, как работать с видео в приложениях Next.js, включая хранение и отображение видеофайлов без ущерба для производительности.

Использование <video> и <iframe>

Видео можно встраивать на страницу с помощью HTML-тега <video> для прямого размещения видеофайлов и <iframe> для видео, размещённых на внешних платформах.

<video>

HTML-тег <video> позволяет встраивать самостоятельно размещённые или напрямую загружаемые видео, обеспечивая полный контроль над воспроизведением и внешним видом.

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"
      />
      Ваш браузер не поддерживает тег video.
    </video>
  )
}

Распространённые атрибуты тега <video>

Полезно знать: При использовании атрибута autoPlay важно также включать атрибут muted для обеспечения автовоспроизведения в большинстве браузеров и атрибут playsInline для совместимости с устройствами iOS.

Полный список атрибутов видео можно найти в документации MDN.

Лучшие практики работы с видео

• Резервное содержимое: При использовании тега <video> включайте резервное содержимое внутри тега для браузеров, не поддерживающих воспроизведение видео.
• Субтитры или титры: Добавляйте субтитры или титры для пользователей с нарушениями слуха. Используйте тег <track> с элементами <video> для указания источников файлов с субтитрами.
• Доступные элементы управления: Рекомендуются стандартные элементы управления HTML5 для навигации с клавиатуры и совместимости с программами чтения с экрана. Для более сложных задач рассмотрите сторонние плееры, такие как react-player или video.js, которые предлагают доступные элементы управления и единообразное поведение в разных браузерах.

<iframe>

HTML-тег <iframe> позволяет встраивать видео с внешних платформ, таких как YouTube или Vimeo.

export default function Page() {
  return (
    <iframe
      src="https://www.youtube.com/watch?v=gfU1iZnjRZM"
      frameborder="0"
      allowfullscreen
    />
  )
}

Распространённые атрибуты тега <iframe>

Полный список атрибутов iframe можно найти в документации MDN.

Выбор метода встраивания видео

Существует два способа встраивания видео в приложение Next.js:

• Самостоятельно размещённые или прямые видеофайлы: Используйте тег <video> для сценариев, требующих детального контроля над функциональностью и внешним видом плеера. Этот метод интеграции в Next.js позволяет настраивать и контролировать ваше видео.
• Использование видеохостингов (YouTube, Vimeo и др.): Для видеохостингов используйте плееры на основе iframe через тег <iframe>. Хотя этот метод ограничивает некоторые возможности контроля, он предлагает простоту использования и функции, предоставляемые этими платформами.

Выбирайте метод встраивания, соответствующий требованиям вашего приложения и желаемому пользовательскому опыту.

Встраивание видео с внешних платформ

Для встраивания видео с внешних платформ можно использовать Next.js для получения информации о видео и React Suspense для обработки состояния загрузки.

1. Создание серверного компонента для встраивания видео

Первым шагом является создание серверного компонента, который генерирует соответствующий iframe для встраивания видео. Этот компонент будет получать исходный URL видео и отображать iframe.

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

  return <iframe src={src} frameborder="0" allowfullscreen />
}

2. Потоковая передача компонента видео с помощью React Suspense

После создания серверного компонента для встраивания видео следующим шагом является потоковая передача компонента с использованием React Suspense.

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

export default function Page() {
  return (
    <section>
      <Suspense fallback={<p>Загрузка видео...</p>}>
        <VideoComponent />
      </Suspense>
      {/* Другое содержимое страницы */}
    </section>
  )
}

Полезно знать: При встраивании видео с внешних платформ учитывайте следующие лучшие практики:

• Убедитесь, что встраиваемые видео адаптивны. Используйте CSS, чтобы iframe или видеоплеер адаптировались к разным размерам экранов.
• Реализуйте стратегии загрузки видео в зависимости от условий сети, особенно для пользователей с ограниченными тарифными планами.

Этот подход обеспечивает лучший пользовательский опыт, предотвращая блокировку страницы, что позволяет пользователю взаимодействовать со страницей во время загрузки видео.

Для более информативного процесса загрузки рассмотрите использование скелетона загрузки в качестве резервного интерфейса. Вместо простого сообщения о загрузке можно отображать скелетон, напоминающий видеоплеер:

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>
      {/* Другое содержимое страницы */}
    </section>
  )
}

Самостоятельное размещение видео

Самостоятельное размещение видео может быть предпочтительным по нескольким причинам:

• Полный контроль и независимость: Самостоятельное размещение даёт вам прямое управление видео, от воспроизведения до внешнего вида, обеспечивая полное владение и контроль без ограничений внешних платформ.
• Настройка под конкретные нужды: Идеально подходит для уникальных требований, таких как динамические фоновые видео, позволяя настраивать видео в соответствии с дизайном и функциональными потребностями.
• Производительность и масштабируемость: Выбирайте решения для хранения, которые обеспечивают высокую производительность и масштабируемость для поддержки растущего трафика и объёма контента.
• Стоимость и интеграция: Балансируйте затраты на хранение и пропускную способность с необходимостью лёгкой интеграции в Next.js и экосистему технологий.

Использование Vercel Blob для размещения видео

Vercel Blob предлагает эффективный способ размещения видео, предоставляя масштабируемое облачное хранилище, хорошо работающее с Next.js. Вот как можно разместить видео с помощью Vercel Blob:

1. Загрузка видео в Vercel Blob

В панели управления Vercel перейдите на вкладку "Storage" и выберите хранилище Vercel Blob. В правом верхнем углу таблицы Blob найдите и нажмите кнопку "Upload". Затем выберите видеофайл для загрузки. После завершения загрузки видеофайл появится в таблице Blob.

Альтернативно можно загрузить видео с помощью серверного действия. Подробные инструкции см. в документации Vercel о загрузке на стороне сервера. Vercel также поддерживает загрузку на стороне клиента. Этот метод может быть предпочтительным для определённых случаев использования.

2. Отображение видео в Next.js

После загрузки и сохранения видео его можно отобразить в приложении Next.js. Вот пример, как это сделать с помощью тега <video> и React Suspense:

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

export default function Page() {
  return (
    <Suspense fallback={<p>Загрузка видео...</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="Видеоплеер">
      <source src={url} type="video/mp4" />
      Ваш браузер не поддерживает тег video.
    </video>
  )
}

В этом подходе страница использует URL видео из @vercel/blob для отображения видео с помощью VideoComponent. React Suspense используется для отображения резервного содержимого до тех пор, пока URL видео не будет получен и видео не будет готово к воспроизведению.

Добавление субтитров к видео

Если у вас есть субтитры для видео, их можно легко добавить с помощью элемента <track> внутри тега <video>. Файл субтитров можно получить из Vercel Blob аналогично видеофайлу. Вот как можно обновить <VideoComponent>, чтобы включить субтитры.

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="Видеоплеер">
      <source src={url} type="video/mp4" />
      <track
        src={captionsUrl}
        kind="subtitles"
        srcLang="en"
        label="English">
      Ваш браузер не поддерживает тег video.
    </video>
  );
};

Следуя этому подходу, можно эффективно самостоятельно размещать и интегрировать видео в приложения Next.js.

Ресурсы

Для дальнейшего изучения оптимизации видео и лучших практик обратитесь к следующим ресурсам:

• Понимание форматов и кодеков видео: Выбирайте правильный формат и кодек, например MP4 для совместимости или WebM для оптимизации в вебе. Подробнее см. руководство Mozilla по видеокодекам.
• Сжатие видео: Используйте инструменты, такие как FFmpeg, для эффективного сжатия видео, балансируя качество и размер файла. Узнайте о методах сжатия на официальном сайте FFmpeg.
• Настройка разрешения и битрейта: Настраивайте разрешение и битрейт в зависимости от платформы просмотра, используя более низкие настройки для мобильных устройств.
• Сети доставки контента (CDN): Используйте CDN для ускорения доставки видео и управления высоким трафиком. При использовании некоторых решений для хранения, таких как Vercel Blob, функциональность CDN обрабатывается автоматически. Узнайте больше о CDN и их преимуществах.

Изучите эти платформы потокового видео для интеграции видео в проекты Next.js:

Открытый компонент next-video

• Предоставляет компонент <Video> для Next.js, совместимый с различными сервисами хостинга, включая Vercel Blob, S3, Backblaze и Mux.
• Подробная документация по использованию next-video.dev с различными сервисами хостинга.

Интеграция с Cloudinary

• Официальное руководство и документация по использованию Cloudinary с Next.js.
• Включает компонент <CldVideoPlayer> для быстрой интеграции видео.
• Найдите примеры интеграции Cloudinary с Next.js, включая адаптивную потоковую передачу с переменным битрейтом.
• Другие библиотеки Cloudinary, включая SDK для Node.js, также доступны.

Видео API Mux

• Mux предоставляет стартовый шаблон для создания видеокурса с Mux и Next.js.
• Узнайте о рекомендациях Mux по встраиванию высокопроизводительного видео для приложений Next.js.
• Изучите пример проекта, демонстрирующий использование Mux с Next.js.

Fastly

• Узнайте больше о видео по запросу (Video on Demand) и интеграции решений Fastly для потокового мультимедиа в Next.js.