混合模式 css_具有CSS混合模式HTML5视频效果

混合模式 css

Traditional video effects such as filters, cross-fades and blends are usually applied in an editing application, such as Adobe Premiere or Apple’s Final Cut. While there are obvious advantages to such a process, any changes made in an editor are “baked in” to each video frame, and can’t be manipulated or undone once the video is exported.

诸如滤镜，交叉渐变和混合之类的传统视频效果通常应用于编辑应用程序中，例如Adobe Premiere或Apple的Final Cut。 尽管此过程有明显的优势，但在编辑器中进行的任何更改都会“嵌入”到每个视频帧中，并且一旦导出视频就无法对其进行操作或撤消。

Yesterday, teaching a class in HTML5 multimedia, I realized that by using CSS filters and the newer blend modes it would be possible to duplicate many of the simpler video effects directly in CSS: the <video> element is like any other, and is equally affected by filter and mix-blend-mode on supporting browsers. This shifts the rendering task onto the GPU of the machine, but the result can still be surprisingly effective.

昨天，在HTML5多媒体课程中，我意识到通过使用CSS过滤器和较新的混合模式 ，可以直接在CSS中复制许多更简单的视频效果： <video>元素与其他元素一样，同样受支持的浏览器上的filter和mix-blend-mode影响。 这将渲染任务转移到机器的GPU上，但是结果仍然可以令人惊讶地有效。

简单的色彩混合 (Simple Color Blends)

Before I explain the complete example, let’s take the simpler case of a color overlay, frequently used as a background for text on video. In this case, I’ll use a gradient behind the video itself:

在解释完整示例之前，让我们以颜色叠加的简单情况为例，该颜色叠加通常用作视频文本的背景。 在这种情况下，我将在视频本身后面使用渐变：

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

The CSS:

CSS：

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

Because the gradient is behind the video, it won’t be seen by browsers that don’t support mix-blend-mode: they will only see the video itself.

由于渐变位于视频的后面 ，因此不支持mix-blend-mode的浏览器将看不到渐变：他们只会看到视频本身。

Because the <video> element automatically integrates the player UI, it would also be affected by mix-blend-mode in appropriate browsers: to avoid that, I’ve made a simple custom UI outside the video to control it in the more complex example above.

因为<video>元素自动集成了播放器UI，所以在适当的浏览器中它也会受到mix-blend-mode影响：为避免这种情况，我在视频外部制作了一个简单的自定义UI来控制更复杂的示例中的视频以上。

黑白视频 (Video To Black & White)

It’s also possible to affect the <video> element with CSS filters, just like images:

也可以使用CSS过滤器影响<video>元素， 就像images一样 ：

video { filter: grayscale(1); }

This can be extremely useful to make quick changes to video without having to convert, edit and re-export the original.

这对于在不进行转换，编辑和重新导出原始文件的情况下快速更改视频非常有用。

动画叠加 (Animated Overlays)

Finally, it’s also possible to create more sophisticated effects, as shown in the example at the top of this article. With this HTML:

最后，也可以创建更复杂的效果，如本文顶部的示例所示。 使用此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>

And this CSS:

而这个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;
}

And a bit of JavaScript applied to the video and associated button:

并将一些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");
})

The resulting combination plays the result on top of the video, as seen at the top of this article. I’ve deliberately not reset the animations at the end so that you see the result when you play the video again. One potential downside of this approach is that browsers that support CSS animations but not yet mix-blend-mode will have a solid rectangle moving over the video, rather than one that interacts with the pixels of the movie underneath; you could avoid that by placing the moving element underneath the video, as in the first example.

最终的组合将结果显示在视频的顶部，如本文顶部所示。 我故意没有在最后重置动画，以便您在再次播放视频时看到结果。 这种方法的一个潜在缺点是，支持CSS动画但尚未mix-blend-mode浏览器将在视频上移动一个实心矩形，而不是与下面电影的像素进行交互。 您可以通过将移动元素放置在视频下方来避免这种情况，如第一个示例所示。

翻译自: https://thenewcode.com/1020/HTML5-Video-Effects-with-CSS-Blend-Modes

混合模式 css