backgroundVideo.js是一款jQuery视频背景插件。该jQuery视频背景插件能够在整个页面或指定的容器中,嵌入HTML5视频,并提供视频自动播放,视频预加载,无限循环等功能。
使用方法
在页面中引入jquery以及backgroundVideo.js文件。
<script src="jquery.min.js"></script>
<script src="backgroundVideo.js"></script>
HTML结构
然后在页面中创建一个视频容器元素。
<div id="test-vedio"></div>
初始化插件
在页面DOM元素加载完毕之后,通过下面backgroundVideo()方法来初始化该jQuery视频背景插件。
$("#test-vedio").backgroundVideo({
mp4: "bg.mp4"
});
该jQuery视频背景插件不仅支持mp4格式,还支持下面的视频格式。
$("#test-vedio").backgroundVideo({
mpeg: "path/to/mpeg-file",
mp4: "path/to/mp4-file",
webm: "path/to/webm-file",
ogg: "path/to/ogg-file",
quicktime: "path/to/quicktime-file",
x_msvideo: "path/to/x-msvideo-file",
m4v: "path/to/m4v-file",
rtf: "path/to/rtf-file",
});
配置参数
该jQuery视频背景插件可用的配置参数有:
$(".wrapper").backgroundVideo({
// enables autoplay
autoplay: true,
// shows video controls
controls: false,
// enables cross origin
crossOrigin: false,
// Start and End time in the console
buffered: false,
// "auto" | "metadata" | "none"
preload: false,
// is muted?
muted: true,
// enables infinite loop
loop: true,
// path to poster image
poster: "path/to/image-file",
// custom text when Your browser does not support HTML5 video
notSupportedText: "Your browser does not support HTML5 video.",
// video ID
settingID: "myVideo",
// shows web video text tracks information
track: false,
track_src: "path/to/vvt-file",
track_kind: "subtitle",
track_srclang: "en",
track_label: "test"
});
该jQuery视频背景插件的github地址为:https://github.com/mikeludemann/backgroundVideo






![MBTI 16型人格职业性格测试源码PC+H5自适应完整版基于ThinkPHP框架[亲测可用]](https://www.icbot.net/upload/portal/20250429/32ccad646f32a5f4926b3b7b5ef3232a.png)















