Регистрация

Варианты вставки видео на сайт

Время чтения: мин.
9
03 дек 2022
00
0
Раздел:
Интернет
Теги:
Интернет

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

Видео, используемые в качестве фона, придают веб-сайту или интернет-магазину динамичность и часто визуально более привлекательны для средней аудитории по сравнению со страницей, на которой все стоит или используются устаревшие слайды. Однако видео на rutube.com перестали быть просто «вау-эффектом» — они все чаще используются в качестве фактического содержания страницы.

Один из самых простых способов встроить видео на страницу — использовать тег видео:

<video src="file.mp4" poster="cover.jpg" control>Ваш браузер не поддерживает воспроизведение видео в формате HTML5 </video>


Благодаря этому способу мы увидим простой плеер, позволяющий не только воспроизвести фильм, но и скачать его на диск:

Ниже приведено описание характерных атрибутов, используемых при встраивании видео на сайт:

  1. постер - позволяет отображать пользовательскую обложку;
  2. элементы управления — благодаря этому атрибуту мы можем видеть кнопки для удобного воспроизведения, паузы и возобновления воспроизведения, а также отвечающие за загрузку и переключение воспроизведения в полноэкранный режим;
  3. autoplay - автоматическое воспроизведение, как только начинается загрузка файла;
  4. loop - видео будет зацикливаться после воспроизведения;
  5. preload — этот атрибут загружает файл до того, как пользователь решит его воспроизвести;
  6. muted — отключить звук по умолчанию (требуется для автозапуска сразу после входа на страницу без взаимодействия с пользователем);
  7. playsinline — обязательный атрибут в Safari для автовоспроизведения (лучше всего использовать autoplay, muted и playsinline для автоматического воспроизведения видео).

Мы можем сделать видео доступными в духе адаптивного веб-дизайна и предоставить размеры, подходящие для конкретного устройства. Использование медийных запросов в данном случае несравненно важнее, чем в случае с фотографиями. В этом случае мы экономим пользователям десятки, а то и сотни мегабайт.
Комментарии
Добавить
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.