漏刻有时数据可视化大屏常见问题(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!

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页