通过Canvas在浏览器中更酷的展示视频

有了Canvas可以更灵活的展示体验更好的视频，能够与页面更好的融合。

文 / Matthew McClure

译 / John

原文 https://mux.com/blog/canvas-adding-filters-and-more-to-video-using-just-a-browser/

视频无疑是网页中最引人关注的元素之一。在一个兼容性良好的网页内，视频的动态画面让网页内容能够更加生动地展现给用户，而那些可响应用户行为并与网页浏览者互动的网页视频元素则将这种美妙体验提升到了新的高度。

 

这里我想为大家介绍Canvas API！为实现更加高阶的视觉效果，Canvas API向开发人员提供了一种通过<canvas>元素在DOM中绘制图形的方法。此方法的一项常见用例就是处理图像，这也使其成为处理连续图像也就是视频的一大利器。我们希望通过以下几个典型案例为大家分享视频+画布并实现更生动精彩的网页交互效果，探索该项技术的无限可能。

样板参数

 

为了保证这些案例能够客观充分反映Canvas API的优势，我们确立了以下测试样板参数：首先，我们使用Mux为每个视频附予播