videoBackground.js是一款jQuery和HTML5视频背景插件。该jQuery和HTML5视频背景插件支持HTML5视频和YouTube视频,使用起来非常简单。
安装
可以通过npm来安装videoBackground.js插件。
npm install video_background
使用方法
在页面中引入jquery和videoBackground.js文件。
<script src="js/jquery.min.js"></script>
<script src="js/videoBackground.js"></script>
HTML结构
使用时,用一个<div>
元素将vedio
元素包裹起来。
<div class="img-wrap html-video-background">
<video src="video/mov_bbb.mp4" autoplay muted></video>
</div>
可以通过data-video-background
属性来指定视频的纵横比。
<div class="img-wrap html-video-background" data-video-background="{"ratio_x": 16, "ratio_y": 9}">
<video src="video/mov_bbb.mp4" autoplay muted></video>
</div>
初始化插件
在页面DOM元素加载完毕之后,通过videoBackground()
方法来初始化该视频背景插件。
$(".html-video-background").videoBackground();
配置参数
ratio_x
和ratio_y
也可以在初始化时作为配置参数传入。
$(".html-video-background").videoBackground({
ratio_x: 16,
ratio_y: 9,
});
该jQuery和HTML5视频背景插件的github地址为:https://github.com/lemehovskiy/videoBackground