Как сделать видео в качестве фона сайта на HTML5. (2/2).
Всем привет! В этой статье я расскажу про фильтры и скорость воспроизведения видео в HTML5.
Начнем с фильтров. К примеру, вы можете добавить оттенок серого к вашему видео
.bgvideo {
// код
filter: grayscale(100%);
}
И, также, вы можете изменить силу его эффекта, поставив вместо 100%, к примеру, 17%
Или вы можете добавить эффект "сепия" к вашему видео таким образом:
.bgvideo {
// код
filter: sepia(100%);
}
Теперь поговорим про воспроизведение видео. Откройте консоль в браузере и пропишите следующее:
var video = document.getElementById('bgvideo');
Таким образом мы получим объект, у которого есть несколько методов и свойство. Поговорим про некоторые из них
video.play();
video.pause();
video.playbackRate = 5;
Думаю, тут все понятно. Метод play запускает воспроизведение видео, метод pause, наоборот, приостанавливает воспроизведение видео, а свойство playbackRate позволяет указать, с какой скоростью должно воспроизводиться видео: 1 - оригинал, > 0 - быстрее, < 0 - медленнее. В нашем случае видео будет идти в 5 раз быстрее, чем в оригинале.
Надеюсь, вы узнали что-то новое для себя. Спасибо за внимание!
-
Создано 03.10.2014 19:30:56
-
Михаил Русаков
Комментарии (1):
Отличный урок! Только поясните, пожалуйста, где вы меняете скорость воспроизведения видео, в CSS? У меня не получается ни замедлить, ни ускорить видео, опишите поподробнее!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.