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

На этой странице описано, как работать с видео в приложениях 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> для указания источников файлов с субтитрами.
• Доступные элементы управления: Рекомендуется использовать стандартные элементы управления HTML5 для навигации с клавиатуры и совместимости с программами чтения с экрана. Для сложных сценариев рассмотрите сторонние плееры, такие как react-player или video.js, которые предлагают доступные элементы управления и единообразное поведение в разных браузерах.

<iframe>

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

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

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

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

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

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

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

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

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

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

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

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

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

  return <iframe src={src} 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

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

Интеграция с ImageKit.io

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