Общепринятые видео эффекты, такие как фильтры, переходы и смешивания, обычно применяются в программе-обработчике видео, такой как Adobe Premiere или Apple’s Final Cut. Несмотря на то, что в этом есть очевидные преимущества, любые изменения, сделанные в программе-обработчике видео, встроены в это видео, и их нельзя изменить или отменить после выпуска видео.

Нам пришла идея, что с помощью фильтров CSS и режимов наложения можно воссоздать многие простые видео эффекты с помощью CSS: на элемент <video>, как и на любой другой, можно воздействовать фильтрами и режимом наложения, если они поддерживаются браузером. Это переносит задачу обработки изображения на видеокарту пользователя, но результат может оставаться на удивление впечатляющим.

Простое наложение цветов

До того, как начать объяснение полного примера, давайте рассмотрим простой пример наложения цветов, часто используемый для фонового текста в видео. В этом случая воспользуемся градиентом, расположенным за видео:

<figure>
        <video>
                <source src="lina.webm">
                <source src="lina.mp4">
        </video>
</figure>

Код CSS:

figure {
        background: linear-gradient(90deg,#00f 50%,transparent 50.1%);
}
figure video {
        mix-blend-mode: overlay;
}

Так как градиент расположен за видео, он не будет виден в браузерах, которые не поддерживают режимы наложения: в них будет видно только само видео.

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

Преобразуем цветное видео в черно-белое

Еще можно применять фильтры CSS к элементу видео таким же образом, как и к изображениям:

video { filter: grayscale(1); }

Это может оказаться очень полезным для быстрого изменения видео без необходимости в редактировании и повторном выпуске видео файла.

Анимированные наложенные слои

И, наконец, также возможно создавать более сложные эффекты, как показано в примере ниже. С помощью следующего кода HTML:

<figure id="fashion">
        <video controls>
                <source src="fashion-export.webm">
                <source src="fashion-export.mp4">
        </video>
        <div id="vid-cover"></div>
        <figcaption>Summer Sale <span>Now On</span></figcaption>
</figure>
<button id="play-button">Play</button>

И этого кода CSS:

@keyframes overlay {
        30% {
                left: 0;
                width: 50%;
        }
        50% {
                background: #00f;
        }
        80% {
                left: 80%;
                width: 20%;
        }
        100% {
                left: 60%;
                width: 40%;
                background: #00f;
        }
}
figure#fashion {
        display: inline-block;
        position: relative;
        font-size: 0;
        margin: 0;
}
figure#fashion video {
width: 100%;
}
figure#fashion div {
        width: 10%;
        height: 100%;
        background: #f00;
        position: absolute;
        top: 0;
        mix-blend-mode: multiply;
        left: 0;
}
video.playing ~ div#vid-cover {
        animation: overlay 10s forwards;
}
figure#fashion video.playing ~ figcaption {
        opacity: 1;
}
figure#fashion figcaption {
        font-size: 50px;
        font-family: Avenir, sans-serif;
        color: white;
        position: absolute;
        width: 40%;
        right: 0;
        top: 30%;
        text-transform: uppercase;
        text-align: center;
        opacity: 0;
        transition: 3s 9s opacity;
}
figure#fashion figcaption span {
        font-size: 40px;
        text-transform: lowercase;
        display: block;
}

И небольшого количества кода JavaScript, примененного к видео и связанной с ним кнопке:

var playbutton = document.getElementById("play-button");
var fashion = document.querySelector("#fashion video");
fashion.removeAttribute("controls");
playbutton.addEventListener("click", function() {
fashion.play();
fashion.classList.add("playing");
})

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

Использовано видео Maximilian Kempe, лицензированное по лицензии Creative Commons.

Автор урока Dudley Storey

Перевод — Дежурка