漏刻有时数据可视化大屏常见问题(16)：视频背景快速加载及展示的解决方案

在数据可视化的过程中，有时为了显示炫酷的背景增加科技感，会设置视频作为背景。使用背景视频的前提是，不影响数据的正常使用，再有就是如果直接通过http调用背景视频，加载速度过慢，影响体验感。现就背景视频的使用做以简单介绍。

背景视频代码

默认设置：自动播放、静音、循环播放， autoplay muted loop；
播放地址采用绝对地址：http://heart.***.net/zhibo002.mp4，该地址是七牛云的CDN加速地址，解决了首次下载缓慢的问题。

    <!-- 视频背景 -->
    <div id="video_wrapper">
        <video autoplay muted loop>
            <source src="http://heart.***.net/zhibo002.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>

CSS样式表

#video_wrapper {
    margin: 0;
    padding: 0
}

#video_wrapper video {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -999;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    opacity: 0.5;
    transform: translate(-50%, -50%)
}

Done！