最后用js捕获audio事件，基本就是src路径 pause暂停 load加载 play播放这些。
如果要做播放的进度条，也可以用个div标签来做，计算整个音频的时间除以比值，js用setTimeout逐渐走div的背景色。
Web开发的时候，有些交互特效比较复杂，想要使用视频实现，但是有一个问题就是视频的背景色呀，它不能是透明的，导致设计师在制作视频的时候必须跟背景融合在一起，开发成本还是蛮高的，维护起来也比较头疼，那有没有什么好办法，可以让MP4 video视频背景色变成透明呢？有！
我们可以借助CSSmix-blend-mode混合模式属性曲线救国。
mix-blend-mode混合模式中有一种混合模式名为滤色，单词是screen，其有一个很有意思的特性表现，那就是黑色和其它元素进行混合的时候表现为透明。
于是我们要实现一个视频背景色透明的效果就很简单，只要把我们的视频背景色设置为黑色，同时设置如下CSS即可：
例如：
下面有一张底图：
然后还有一个下雨的视频（不播放请点击）：
此时，我们把视频覆盖在素图上方，同时设置这个视频的混合模式为screen，则可以看到视频背景变成透明了，下雨的动效很好的在底图上面呈现，如下效果所示（不播放请点击）（实时渲染，非IE浏览器下有效果）：
就这么简单！
在所有不需要兼容IE浏览器的项目中都可以使用。
相信你一定学到了这个技能TIPS！
二、结语
关于滤色screen的深入理解，可以参见这篇文章：“深入理解CSS mix-blend-mode滤色screen混合模式”。
预告，接下来两个星期文章会爆更，请做好准
在css 样式中 @media 标签，控制屏幕宽度让其进行自动变化。经常为不同分辨率设备或不同窗口大小下布局错位而头疼，可以利用@media screen实现网页布局的自适应。
优点：无需插件和手机主题，对移动设备友好，能够适应各种窗口大小，只需在CSS中添加@media screen属性，根据浏览器宽度判断并输出不同的长宽值。
以下是针对自用主题而写的css，对宽度768以下设备只保留主要文章框架，以便在有限的空间里获得最佳阅读体验。
