vidbacking.js html5视频背景插件，支持手机效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

vidbacking是一款响应式 html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。如果浏览器不支持HTML5视频，插件会自动将背景显示为指定的背景图片。

vidbacking可以在某个 div 或 section 元素上制作HTML5视频背景效果。也可以制作全屏的HTML5视频背景效果。对于全屏的视频背景，你需要在body标签之后添加HTML5 video标签，在video标签中需要添加vidbacking class类。

主要js代码与说明

初始化插件

在页面DOM元素加载完毕之后，可以通过vidbacking()方法来初始化该HTML5视频背景插件。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.vidbacking.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        /* 全屏HTML5视频背景 */
        $('body').vidbacking({
            'masked': true
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        /* DIV元素内的HTML5视频背景 */
        $('.video_box').vidbacking({
            'masked': true
        });
    });
</script>