Javascript 视频背景到彩色背景的转换

我正在使用一个视频作为背景视频完成后，我想改变视频背景颜色的背景，如红绿或任何颜色。我正在尝试HTML5，但被卡住了。谁能帮我一下吗。

试试这段代码，据我了解可能这就是你要搜索的，在这里背景视频完成后，我已经将身体背景颜色改为红色

$（文档）.ready（函数（）{
$（'video'）。在（'end'，function（）上{
$（“视频”）.first（）.attr（'src'，''）
$（'html，body'）.css（'background'，'red'）；
});
});
#标题{
边框底部：0px；
边缘底部：0px；
}
.特色区{
边际上限：0px；
边缘底部：0px；
}
#最近的职位{
利润上限：27px；
}
#简介{
边缘底部：27px；
宽度：75%；
}
.近期邮箱{
背景色：#F2F2；
垫面：4px；
边缘顶端：40px；
}
#标志{
显示：无；
}
#英雄{
位置：相对位置；
z指数：1；
高度：600px；
宽度：100%；
边缘底部：40px；
垂直对齐：中间对齐；
文本对齐：居中；
}
#英雄#背景{
位置：绝对位置；
z指数：-1；
排名：0；
底部：0；
左：0；
右：0；
背景：url（“http://www.makemeapro.org/wp-content/uploads/2015/07/hero-cover-modified.jpg");
不透明度：.4；
最大宽度：100%；
高度：自动；
背景尺寸：封面；
溢出：隐藏；
}
#外层{
宽度：100%；
身高：100%；
}
.btn{
背景：#3498db；
背景图像：-webkit线性渐变（顶部，#3498db，#2980b9）；
背景图像：-moz线性梯度（顶部，#3498db，#2980b9）；
背景图像：-ms线性梯度（顶部，#3498db，#2980b9）；
背景图像：-o-线性梯度（顶部，#3498db，#2980b9）；
背景图像：线性梯度（至底部，#3498db，#2980b9）；
-webkit边界半径：28；
-莫兹边界半径：28；
边界半径：28px；
颜色：#ffffff；
字体大小：20px；
填充：10px 20px 10px 20px；
文字装饰：无；
边界：0px；
大纲：无；
}
.btn:悬停{
背景#3cb0fd；
背景图像：-webkit线性渐变（顶部，#3cb0fd，#3498db）；
背景图像：-莫兹线性梯度（顶部，#3cb0fd，#3498db）；
背景图像：-ms线性梯度（顶部，#3cb0fd，#3498db）；
背景图像：-o-线性梯度（顶部，#3cb0fd，#3498db）；
背景图像：线性梯度（至底部，#3cb0fd，#3498db）；
文字装饰：无；
光标：指针；
}
#英雄视频{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}

帮助年轻专业人士在工作世界中导航。
参加革命
我们很有可能帮助您，但我们需要您一直使用的代码。你也可以分享你的问题的截图。你提供的关于你的问题的信息越多，那么用户能够帮助你的机会就越大。你能更新一些示例代码吗？你试过什么了吗？比粘贴代码！试试我的代码，也许这对你有帮助