Уроки

Видеоплеер

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

<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, то и постер должен иметь те же соотношения сторон.

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

Проверьте ваш сайт
Это бесплатно и займёт от 7 до 45 секунд

Мы используем cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности. Ладушки