inuasparwil.ru

Як зробити відео в якості фону сайту на html5. (2/2).

Відео: Як просто зробити фон з відео на головній сторінці сайту

Як зробити відео в якості фону сайту на HTML5. (2/2).

Відео: Відео як фон сайту. HTML5-Background-Video

Всім привіт! У цій статті я розповім про фільтри і швидкість відтворення відео в HTML5.

Почнемо з фільтрів. Наприклад, ви можете додати відтінок сірого до вашого відео

.bgvideo {
// код
filter: grayscale(100%) -
}

І, також, ви можете змінити силу його ефекту, поставивши замість 100%, наприклад, 17%

Відео: HTML5 Fullscreen Background Відео: Filters & Playback Speed ​​(2/2)




Або ви можете додати ефект "сепія" до вашого відео таким чином:

.bgvideo {
// код
filter: sepia(100%) -
}


Тепер поговоримо про відтворення відео. Відкрийте консоль в браузері і пропишіть наступне:

var video = document.getElementById(`Bgvideo`) -

Таким чином ми отримаємо об`єкт, у якого є кілька методів і властивість. Поговоримо про деякі з них

Відео: Як зробити фон для html сайту

video.play() -
video.pause() -
video.playbackRate =5-

Думаю, тут все зрозуміло. метод play запускає відтворення відео, метод pause, навпаки, припиняє відтворення відео, а властивість playbackRate дозволяє вказати, з якою швидкістю має відтворюватися відео: 1 - оригінал, gt; 0 - швидше, lt; 0 - повільніше. У нашому випадку відео буде йти в 5 разів швидше, ніж в оригіналі.

Сподіваюся, ви дізналися щось нове для себе. Дякую за увагу!

Поділися в соціальних мережах:

Схожі
Як зробити просту навігацію на html5 і css3.Як зробити просту навігацію на html5 і css3.
Перевірка підтримки нововведень html5 і css3.Перевірка підтримки нововведень html5 і css3.
Атрибут data- * в html5.Атрибут data- * в html5.
Чи потрібно зараз використовувати html5 і css3Чи потрібно зараз використовувати html5 і css3
Робота з відео в html5.Робота з відео в html5.
Вийшов курс "html5 і css3 з нуля до гуру"Вийшов курс "html5 і css3 з нуля до гуру"
Робота з аудіо в html5.Робота з аудіо в html5.
Як зробити фотографію з вашої веб-камери на jаvascript.Як зробити фотографію з вашої веб-камери на jаvascript.
Ефект сірого відтінку на css.Ефект сірого відтінку на css.
Html 5 що нового?Html 5 що нового?
» » Як зробити відео в якості фону сайту на html5. (2/2).