Корректное подключение видеоплеера

Видеоплеер на странице размещается вот таким кодом:

<video poster="/preview-image.png" preload="none">
        <source src="./video-file.mp4" type="video/mp4">
        <source src="./video-file.webm" type="video/webm">
    </video>

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

Укажите атрибут preload="none". Это предотвратит предзагрузку видео файла. Без него страница загрузит первые несколько секунд видео, которые будут весить как вся остальная страница вместе с картинками. Это сильно замедляет загрузку страницы.
Укажите постер в аттрибуте preload="none". Постер - это картинка-превью, которая отображается по умолчанию, пока пользователь не начнёт воспроизведение видео.
Укажите видео в 2 форматах: WebM и MP4. Первый формат - самый современный и весит меньше всего. Но он не всегда поддерживается операционными системами. Пользователи сохранят себе на компьютер это видео и не смогут его воспроизвести.
Для каждого source укажите атрибут type.
Соотношение сторон у постера должно соответствовать соотношению сторон видео файла. Если ваше видео FullHD с соотношением сторон 16:9, то и постер должен иметь те же соотношения сторон.

Также наша проверка проверяет наличие видео файлов и постера, а также то, что их можно открыть и воспроизвести.

ПРО подписка для работы с сервисом

ПРО подписка

Для регулярной работы над сайтом или группой сайтов.

1 580 ₽

3500 страниц в неделю. Срок подписки — 1 месяц.

Баланс пополняется ежедневно на 500 страниц. Максимум баланса - 3 500.
1 страница даёт 1 запуск инструмента Проверка страницы или 1 внутренняя HTML страница вашего сайта в инструменте Проверка сайта
До 50 страниц в одной проверке в инструментах удаление неиспользуемого CSS/JS
Неограниченные проверки в инструментах пальцеприятность и отзывчивость интерфейса