Установка миниатюры для видео в HTML5: custom thumbnail

Быстрый ответ

Атрибут poster тега <video> позволяет установить изображение предпросмотра, для этого достаточно указать URL соответствующего изображения. Вот наглядный пример кода:

<video controls poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
</video>

Пути "thumbnail.jpg" и "video.mp4" необходимо заменить на актуальные пути к файлам изображения и видео.

Подробная инструкция по установке миниатюры для видео

Использование первого кадра видео как запасного варианта миниатюры

Если у вас нет отдельного файла изображения для предпросмотра, воспользуйтесь первым кадром видео. Для этого достаточно добавить #t=0.1 к URL вашего видеофайла:

<video controls>
    <source src="video.mp4#t=0.1" type="video/mp4">
</video>

Только помни, что это запасной вариант 🤫)

Подробнее об этом расскажет наш спикер на видео

Адаптивный дизайн и ленивая загрузка – двуручный меч мастера веб-разработки

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

<video controls poster="thumbnail.jpg" style="max-width:100%; height:auto;" loading="lazy">
    <source src="video.mp4" type="video/mp4">
</video>

Так совмещаются усилия в борьбе за адаптивность и быстроту загрузки 🥇.

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

Оптимизация видеоконтента для поисковых систем – важный вопрос. Cпециальные метатеги HTML помогут улучшить поисковую оптимизацию. Просто добавьте нужные метатеги, и ваше видео будет легче обнаруживать в поиске.

Использование JavaScript для динамической установки предпросмотра

Быстрый выбор кадра для предпросмотра

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

var video = document.querySelector('video');
video.addEventListener('canplay', function() {
    this.currentTime = magicMomentInVideo; // Время желаемого кадра
});
video.addEventListener('seeked', function() {
    // Здесь необходимо вызвать функцию захвата предпросмотра через canvas
});

Этот код – своего рода колдовство для разработчика.

Творческое применение элемента canvas

Элемент <canvas>, вместе с XMLHttpRequest и base64-кодированием, позволит извлечь изображения из видео и отправить их на сервер с той же легкостью, с которой волшебник творит свои чудеса.

Визуализация

Представьте себе так:

🌄 = Избранное изображение предпросмотра
📺 = HTML5 плеер видео

Сцена установлена:

<video controls poster="🌄">
  <source src="movie.mp4" type="video/mp4">
  Ваш браузер не поддерживает HTML5 видео.
</video>

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

📺🔳🌄 // Плеер отображает миниатюру

После начала воспроизведения:

📺▶️🎥 // Действие начинается! Миниатюра скрыта, идет воспроизведение видео

Изображение предпросмотра — это то, что заставит зрителя начать просмотр вашего видео.

Кросс-браузерная совместимость

Учитывая разнообразие браузеров, использование нескольких форматов видео (mp4, ogg, webm) позволит обеспечить работу вашего видео с любым из них.

Управление видео: привлекательно и компактно

SVG-иконки позволят создать привлекательные и компактные элементы управления видео, подчеркивая современность и функциональность интерфейса.

Аутопроигрывание и элементы управления: предугадываем желания пользователя

Атрибут автовоспроизведение автоматически запускает видео, а элементы управления обеспечивают удобство и плавность при просмотре. Не забудьте добавить атрибут controls в ваш тег <video>.

PHP: добавляем уровень продвинутости

Если вы владеете PHP, его можно использовать для сохранения и извлечения предпросмотровых изображений на сервере. Разве Мэтт Деймон не оценил бы возможности PHP, если бы они помогли спасти его персонажа в известном кинофильме?

Полезные материалы

1. Видео- и аудиоконтент на MDN — углубленное изучение работы с аудио и видео в HTML5.
2. HTML Видео на w3schools — для изучения и тренировки работы с видео в HTML5.
3. HTML Стандарт на whatwg — описание стандартов использования тега <video> и атрибута poster.