Приветствую, коллеги! Сегодня разберёмся с вставкой видео — казалось бы, что тут сложного? Но когда сам начинаешь делать, появляется куча вопросов. Давайте разберём всё по полочкам.
Самый простой способ (для ленивых)
👉 <video src="мое-видео.mp4" controls></video>
Вот и всё! Браузер сам добавит кнопки управления. Но давайте копнём глубже.
Полноценный вариант
Лучше использовать такую конструкцию:
👉 <video width="640" height="360" controls poster="превью.jpg"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Ваш браузер не поддерживает видео </video>
Что мы тут сделали:
- Указали размеры
- Добавили превью (poster)
- Подготовили несколько форматов
- Добавили сообщение для старых браузеров
Хитрости, которые реально работают
- Автовоспроизведение (осторожно, раздражает пользователей!)
👉 <video autoplay muted loop src="анимация.mp4"></video> - Ленивая загрузка (чтобы не тормозить страницу)
👉 <video preload="none" poster="превью.jpg" controls>... - Собственные контролы (если стандартные не подходят)
👉 <video id="myVideo" src="video.mp4"></video> <button onclick="document.getElementById('myVideo').play()">▶️</button>
Встраиваем YouTube (если на своём хостинге нет места)
👉 <iframe width="560" height="315" src="https://www.youtube.com/embed/КОД_ВИДЕО" frameborder="0" allowfullscreen></iframe>
Плюсы:
- Не грузит ваш сервер
- Адаптируется под все устройства
Минусы:
- Реклама YouTube
Частые косяки
- Видео не воспроизводится на мобильных
Решение: добавить playsinline для iOS
👉 <video playsinline ...> - Размытое превью
Решение: используйте качественный poster.jpg в том же разрешении, что и видео - Огромный размер файла
Решение: сжимайте через HandBrake или аналоги
Оптимизация — наше всё
- Используйте WebM (меньше вес при том же качестве)
- Для фоновых видео ставьте низкое разрешение (например 720p вместо 4K)
- Всегда указывайте preload="none" для видео ниже скролла
Личный опыт
Когда я только начинал, неделю не мог понять, почему видео не работает на iPhone. Оказалось, нужно было добавить всего один атрибут — playsinline. Теперь всегда его ставлю по умолчанию.
Совет: сначала тестируйте на своём телефоне, потом выкладывайте. Сэкономите кучу нервов.
Попробуйте вставить видео прямо сейчас — начинайте с простого варианта, потом усложняйте. Если что-то не получится — пишите в комменты, помогу разобраться!