Видео, используемые в качестве фона, придают веб-сайту или интернет-магазину динамичность и часто визуально более привлекательны для средней аудитории по сравнению со страницей, на которой все стоит или используются устаревшие слайды. Однако видео на rutube.com перестали быть просто «вау-эффектом» — они все чаще используются в качестве фактического содержания страницы.
Один из самых простых способов встроить видео на страницу — использовать тег видео:
<video src="file.mp4" poster="cover.jpg" control>Ваш браузер не поддерживает воспроизведение видео в формате HTML5 </video>Благодаря этому способу мы увидим простой плеер, позволяющий не только воспроизвести фильм, но и скачать его на диск:
Ниже приведено описание характерных атрибутов, используемых при встраивании видео на сайт:
- постер - позволяет отображать пользовательскую обложку;
- элементы управления — благодаря этому атрибуту мы можем видеть кнопки для удобного воспроизведения, паузы и возобновления воспроизведения, а также отвечающие за загрузку и переключение воспроизведения в полноэкранный режим;
- autoplay - автоматическое воспроизведение, как только начинается загрузка файла;
- loop - видео будет зацикливаться после воспроизведения;
- preload — этот атрибут загружает файл до того, как пользователь решит его воспроизвести;
- muted — отключить звук по умолчанию (требуется для автозапуска сразу после входа на страницу без взаимодействия с пользователем);
- playsinline — обязательный атрибут в Safari для автовоспроизведения (лучше всего использовать autoplay, muted и playsinline для автоматического воспроизведения видео).
Мы можем сделать видео доступными в духе адаптивного веб-дизайна и предоставить размеры, подходящие для конкретного устройства. Использование медийных запросов в данном случае несравненно важнее, чем в случае с фотографиями. В этом случае мы экономим пользователям десятки, а то и сотни мегабайт.
