Официальный сайт ©


» » Видео в качестве фона для сайта



Дата: 15-03-2019, 17:35

Тема: Видео в качестве фона для сайта

Автор: akva


Видео в качестве фона для сайта

Если вы хотите установить видео для фона на сайте,
необходимо помнить о некоторых моментах:

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

Во-вторых, избегайте звука из видео. Используйте ролики без аудио, либо добавьте
возможность пользователю самому включить звук, если ему это понадобится.
Автоматическое воспроизведение звука при открытии сайта считается очень дурным тоном.

В-третьих, нужно позаботиться о кроссбраузерности и корректном отображении
и воспроизведении видео на всех устройствах, а также предоставить альтернативу видео
(для тех случаев, если оно не воспроизведется). Т.е загружать картинку.


Посмотреть Demo можно здесь

Скачать: video_html5.zip [6,3 Mb] (cкачиваний: 5)


HTML код (небольшие пояснения)

Для примера взят видеоролик с разрешением 1920×1080, продолжительностью 15 секунд
и весом чуть больше 3 МБ. (вы можете использовать ролики даже большого размера *.MB)
Внутри блока div с идентификатором video-bg находится фон:

<div id="video-bg">
<video width="100%" height="auto" preload="auto" autoplay="autoplay"
loop="loop" poster="bg/bg.jpg">
<source src="bg/1_video.mp4" type="video/mp4"></source>
<source src="bg/2_video.webm" type="video/webm"></source>
</video>
</div>


Для тега video указаны следующие атрибуты:

width – ширина области для воспроизведения ролика;

height – высота области;

preload – загрузка видео вместе со страницей;

autoplay – автоматическое воспроизведение видео;

loop – циклическое повторение видео;

poster – изображение, которое отображается вместо видео, пока оно загружается.

Далее записано два тега , где указаны URL-адреса видео в разных форматах – MP4 и WEBM.
Зачем подключать ролик в нескольких форматах?
Дело в том, что не все браузеры поддерживают один-единственный формат видео.
Чтобы видео смогли распознать все современные браузеры, необходимо предоставить файл
хотя бы в этих двух форматах. А атрибут type с соответствующими значениями помогает браузеру
быстрее определиться с выбором.


Всего ответов: 0


  Информация



Гости не могут создавать темы и писать ответы... .


Авторизация

   Регистрация

Календарь

«    Апрель 2019    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
2930 

Аксиома

Каждый кузнец может выковать саблю, но только мастер может сделать настоящий клинок...
- - - - - - -
Обучение программированию не может научить быть экспертом, точно также как и изучение красок и кисточек не может превратить кого-либо в художника...
- - - - - - -
То, что можно взломать... тут всё понятно. А то, что взломать нельзя... просто займёт немного больше времени.
- - - - - - -
Как видно, совершенство достигается не тогда, когда уже нечего прибавить, а только тогда, когда уже ничего нельзя отнять...
- - - - - - -
Анализ компьютерных систем, это как воспитание детей; можно нанести огромный вред, но нельзя гарантировать успех...

Статистика - 2019

                                                                           Авторское право © 2000 - 2019 Stels Lab Team - Hack Tools (Взломанная Америка)