Всем привет! В этом материале я расскажу про фильтры и скорость воспроизведения видео в HTML5 .

Как сделать видео в качестве фона сайта на 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 раз быстрее, чем в оригинале.

Надеюсь, вы узнали что-то новое для себя. Спасибо за внимание!