Способы размещения видео на сайте: плеер Boomstream, HTML5 и тег video
Коротко о главном:
Для размещения видео на сайте доступно три варианта: готовый плеер Boomstream с кодом для вставки, сторонние HTML5-плееры (Plyr, Video.js) с mp4-ссылкой, или встроенный браузерный плеер через тег <video>. Boomstream создаёт mp4-транскоды для каждого разрешения, которые поддерживаются всеми современными браузерами. При использовании тега <video> для автостарта обязательно отключайте звук, а для iOS добавляйте параметр #t=0.001 в конец ссылки.
Как Boomstream подготавливает видео для размещения
Когда вы загружаете видео на платформу, система автоматически создаёт mp4-файлы для каждого доступного разрешения (транскоды). В дальнейшем при воспроизведении используются именно эти готовые файлы, а не загруженный оригинал. Именно так работают все современные видеохостинги.
Формат mp4 выбран не случайно — этот контейнер имеет нативную поддержку воспроизведения во всех популярных браузерах: Chrome, Safari, Firefox, Edge и мобильных браузерах.
3 способа показа видео на сайте
Способ 1. Готовый плеер Boomstream
После загрузки видео на сервис и обработки оригинала вы получаете готовый код плеера для вставки на сайт. Внешний вид плеера, опции и кнопки настраиваются непосредственно на платформе. Boomstream берёт на себя всю техническую часть: адаптивный стриминг, защиту от скачивания, аналитику просмотров. Подробнее в этой статье.
Преимущества:
- Не нужно писать код — достаточно скопировать и вставить;
- Встроенная защита контента от скачивания;
- Автоматическое переключение качества в зависимости от скорости интернета зрителя;
- Детальная аналитика просмотров и поведения зрителей;
- Автоматические обновления и исправления ошибок.
Для кого подходит: для онлайн-школ, авторов курсов, медиа-проектов, которым нужна защита контента и аналитика без разработки собственного плеера.
Способ 2. Сторонний HTML5-плеер
Вы можете использовать любой сторонний HTML5-плеер, например:
- Plyr
- Video.js
- Shaka Player
- MediaElement.js
- или любой другой совместимый плеер
В этом случае в качестве источника видео используется прямая mp4-ссылка с платформы Boomstream. Вам нужно самостоятельно настроить и поддерживать код плеера на своём сайте. При этом вы получаете полный контроль над дизайном, анимациями и поведением плеера. Boomstream отвечает только за передачу видеопотока.
Преимущества:
- Полный контроль над внешним видом и функционалом;
- Возможность кастомизации под фирменный стиль;
- Интеграция с любыми JavaScript-библиотеками;
- Гибкая настройка поведения плеера.
Недостатки:
- Требуются знания веб-разработки;
- Нет встроенной защиты от скачивания (нужно реализовывать отдельно);
- Самостоятельная поддержка и обновления кода.
Для кого подходит: для веб-разработчиков, IT-компаний, проектов с уникальными требованиями к интерфейсу плеера.
Способ 3. Встроенный браузерный плеер (тег <video>)
Самый простой способ — использовать встроенный в браузер плеер через HTML-тег <video>. Именно этот тег подставляется в блоках Tilda для видео, когда вы выбираете источник в формате mp4.
Пример кода:
<video controls>
<source src="https://cdnv.boomstream.com/balancer/your-video.mp4" type="video/mp4">
Ваш браузер не поддерживает воспроизведение видео.
</video>