前几天收到一个需求，要实现一个背景视频播放的效果，在网上找了几个解决方案。
video.js 这是一起封装非常好的JS库了，可以实现非常棒的效果，一个效果图：
不过在我发现这个库之前，前人已经用了原生的<video>实现了，所以要在原生的基础上做修改。
显示 shadow DOM 要想自定义样式，需要先把浏览器的 shadow DOM 开启，开启方式如图：
打开之后就可以看到webkit内核对video的默认显示样式了
几个常用的控制样式 video::-webkit-media-controls-panel video::-webkit-media-controls-play-button video::-webkit-media-controls-volume-slider-container video::-webkit-media-controls-volume-slider video::-webkit-media-controls-mute-button video::-webkit-media-controls-timeline video::-webkit-media-controls-current-time-display video::-webkit-full-page-media::-webkit-media-controls-panel video::-webkit-media-controls-timeline-container video::-webkit-media-controls-time-remaining-display video::-webkit-media-controls-seek-back-button video::-webkit-media-controls-seek-forward-button video::-webkit-media-controls-fullscreen-button video::-webkit-media-controls-rewind-button video::-webkit-media-controls-return-to-realtime-button video::-webkit-media-controls-toggle-closed-captions-button 具体看字面意思应该就可以理解了，这是不做赘述了。
一个不算总结的后话 当前的解决方案其实更偏向移动端，在IE上还需要特殊写样式来HACK，要跨浏览器还是推荐使用框架来实现~
