CardMedia для изображений и видео

CardMedia — это компонент библиотеки MUI, предназначенный для отображения мультимедийного контента внутри карточек (Card). Он поддерживает как изображения, так и видео, позволяя создавать визуально насыщенные элементы интерфейса. Компонент автоматически адаптируется к стилям карточки, обеспечивая единый внешний вид и корректное масштабирование контента.

Основные свойства CardMedia

  1. component Определяет HTML-элемент, который будет использоваться для рендеринга контента. Например:

    <CardMedia
  component="img"
  image="/path/to/image.jpg"
  alt="Описание изображения"
/>

    Возможные значения:

    • "img" — стандартное изображение
    • "video" — видеоплеер
    • Любой кастомный React-компонент

  2. image Указывает путь к изображению. Работает только с компонентом img. Не поддерживается для video.

  3. src Используется при компоненте video. Указывает источник видеоконтента.

    <CardMedia
  component="video"
  src="/path/to/video.mp4"
  controls
/>

  4. alt Альтернативный текст для изображений, важен для доступности и SEO.

  5. height и width Определяют размеры мультимедиа. Можно использовать как числовые значения, так и строки с единицами измерения (px, %, vh, vw).

  6. sx Позволяет применять кастомные стили через систему MUI:

    <CardMedia
  component="img"
  image="/path/to/image.jpg"
  sx={{ borderRadius: 2, objectFit: "cover" }}
/>

Отображение изображений

Для большинства карточек с изображениями достаточно указать component="img" и image. Пример карточки с изображением:

import { Card, CardMedia, CardContent, Typography } from '@mui/material';

<Card sx={{ maxWidth: 345 }}>
  <CardMedia
    component="img"
    height="140"
    image="/images/nature.jpg"
    alt="Природа"
  />
  <CardContent>
    <Typography variant="h6">Заголовок карточки</Typography>
    <Typography variant="body2" color="text.secondary">
      Описание изображения.
    </Typography>
  </CardContent>
</Card>

Особенности:

  • height можно задавать в пикселях или процентном соотношении.
  • objectFit управляет тем, как изображение масштабируется внутри карточки: "cover", "contain" или "fill".

Использование CardMedia для видео

CardMedia позволяет внедрять видео непосредственно в карточку, сохраняя единый дизайн. Основные моменты:

  • Для видео следует указывать component="video".
  • Свойство controls добавляет стандартные элементы управления видео.
  • Можно использовать autoPlay, loop и muted для настройки воспроизведения.

Пример:

<Card sx={{ maxWidth: 345 }}>
  <CardMedia
    component="video"
    src="/videos/sample.mp4"
    controls
    height="200"
  />
  <CardContent>
    <Typography variant="h6">Видео внутри карточки</Typography>
  </CardContent>
</Card>

Советы по видео:

  • Использовать preload="metadata" для экономии трафика.
  • При мобильных устройствах рекомендуется muted и autoPlay, так как некоторые браузеры блокируют автоматическое воспроизведение звука.
  • objectFit: "cover" позволяет видео занимать всю площадь карточки без искажений.

Кастомизация и стилизация

CardMedia полностью интегрируется с системой стилей MUI, что позволяет:

  • Использовать sx для единообразного оформления:

    <CardMedia
  component="img"
  image="/images/photo.jpg"
  sx={{
    borderRadius: 2,
    objectFit: 'cover',
    transition: 'transform 0.3s',
    '&:hover': { transform: 'scale(1.05)' }
  }}
/>

  • Применять классы через className и использовать внешние CSS-файлы.

  • Настраивать адаптивность: можно задавать разные размеры для мобильных и десктопных устройств с помощью медиазапросов в sx.

Комбинирование изображений и видео

CardMedia допускает динамическое отображение контента, например, в зависимости от типа мультимедиа:

const mediaType = 'video'; // или 'img'
<CardMedia
  component={mediaType}
  {...(mediaType === 'img' ? { image: '/images/photo.jpg' } : { src: '/videos/sample.mp4', controls: true })}
  height="200"
/>

Это позволяет использовать одну структуру карточки для разных типов контента, сохраняя чистоту кода и согласованность интерфейса.

Практические рекомендации

  • Всегда указывать alt для изображений и controls для видео.
  • Для плавного отображения медиаконтента использовать objectFit: "cover" и фиксированные высоты.
  • При работе с видео учитывать совместимость с браузерами и автоматическое воспроизведение на мобильных устройствах.
  • Использовать sx вместо inline-стилей для поддержания единообразия с MUI-темой.

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

Оглавление