0Pricing
HTML Academy · Урок

Элемент video и соотношение сторон

Встраивайте видео и сохраняйте правильное соотношение сторон

«Элемент video и соотношение сторон» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Элемент видео

Элемент <video> встраивает видео непосредственно в страницу:

<video controls width="800" height="450" src="tutorial.mp4">
  Your browser does not support video.
</video>

Основные атрибуты

Важные атрибуты видео:

<video
  src="demo.mp4"
  controls           <!-- show player UI -->
  width="1280"       <!-- intrinsic width -->
  height="720"       <!-- intrinsic height -->
  poster="preview.jpg" <!-- thumbnail before play -->
  preload="metadata"   <!-- preload only metadata -->
>
  Your browser does not support video.
</video>

Атрибут poster

Атрибут poster задаёт миниатюру, отображаемую до начала воспроизведения видео:

<video controls poster="/thumbnails/episode-42.jpg" width="800" height="450">
  <source src="episode-42.mp4" type="video/mp4">
</video>
<!-- Without poster: browser shows a black frame
     or the first frame of the video (browser-dependent) -->

Ширина и высота для сохранения пропорций

Всегда указывайте ширину и высоту, чтобы предотвратить смещение макета:

<video controls width="1280" height="720" src="video.mp4"></video>
<!-- Browser reserves correct space before video loads -->
<!-- Prevents CLS (Cumulative Layout Shift) -->
<!-- Make responsive with CSS:
  video { width: 100%; height: auto; }
-->

Адаптивный CSS для видео

Сделайте видео адаптивным с помощью CSS:

video {
  width: 100%;
  height: auto;
  max-width: 1280px;
  display: block;
  margin: 0 auto;
}

/* Aspect ratio box: */
.video-wrapper {
  position: relative;
  padding-top: 56.25%;  /* 16:9 aspect ratio: 9/16 = 0.5625 */
}
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

Свойство CSS aspect-ratio

Современный подход с использованием CSS aspect-ratio:

video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Other common ratios: */
/* 4:3 → aspect-ratio: 4 / 3 */
/* 21:9 → aspect-ratio: 21 / 9 */
/* 1:1 → aspect-ratio: 1 */

Управление воспроизведением видео через JS

Управление видео с помощью JavaScript:

const video = document.getElementById('my-video');

video.play();
video.pause();
video.currentTime = 60;  // jump to 1 minute
video.playbackRate = 1.5;  // 1.5x speed
video.volume = 0.7;
video.muted = true;
video.requestFullscreen();

console.log(video.duration);    // total length
console.log(video.paused);      // is it paused?

События видео

Отслеживайте события видео:

video.addEventListener('play', () => updatePlayButton());
video.addEventListener('pause', () => updatePlayButton());
video.addEventListener('ended', () => showNextVideo());
video.addEventListener('timeupdate', () => updateProgressBar());
video.addEventListener('loadedmetadata', () => {
  console.log('Duration:', video.duration);
  console.log('Dimensions:', video.videoWidth, 'x', video.videoHeight);
});

Полноэкранный API

Программный переход в полноэкранный режим и выход из него:

const btn = document.getElementById('fullscreen-btn');
const video = document.getElementById('player');

btn.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    video.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

document.addEventListener('fullscreenchange', () => {
  btn.textContent = document.fullscreenElement ? 'Exit Fullscreen' : 'Fullscreen';
});

Политика автоматического воспроизведения видео

Правила браузеров для автоматического воспроизведения видео:

  • Видео без звука → может автоматически воспроизводиться во всех современных браузерах
  • Видео со звуком → блокируется, если пользователь не взаимодействовал со страницей
  • Индекс взаимодействия с медиаконтентом Google → постоянным посетителям автоматическое воспроизведение может быть разрешено
  • Всегда предоставляйте кнопку воспроизведения в качестве запасного варианта

Специальные возможности видео

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

  • Предоставляйте субтитры для всех диалогов и важных звуков
  • Предоставляйте расшифровку для глухих и слабослышащих пользователей
  • Предоставляйте тифлокомментарии для незрячих пользователей (описывайте информацию, доступную только визуально)
  • Убедитесь, что управление с клавиатуры работает (встроенные элементы управления работают)

Быстрая проверка

Какой атрибут видео отображает статическое изображение до начала воспроизведения?

Итоги: элемент видео

Основные сведения об элементе видео:

  • controls — отображает интерфейс проигрывателя
  • width и height — предотвращают смещение макета
  • poster — миниатюра до начала воспроизведения
  • preload="metadata" — хороший вариант по умолчанию для производительности
  • Адаптивность: width: 100%; height: auto; или aspect-ratio: 16/9
  • Видео без звука может воспроизводиться автоматически, а видео со звуком — в большинстве браузеров нет

Часто задаваемые вопросы

Урок «Элемент video и соотношение сторон» бесплатный?

Да — полный текст урока «Элемент video и соотношение сторон» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Элемент video и соотношение сторон»?

Встраивайте видео и сохраняйте правильное соотношение сторон Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Элемент video и соотношение сторон»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Элемент audio: src controls loop autoplay
  2. Элемент video и соотношение сторон
  3. Элемент source для нескольких форматов
  4. Субтитры с track и WebVTT
← Назад к HTML Academy