jquery.vide.js

超简单的视频背景插件–jQuery.vide.js

兼容性

所有现代浏览器

IE9+

IOS和android设备,因为视频只能用本地播放器播放,所以只能用图片代替

准备工作

为了兼容各种浏览器,要把当作背景的视频的格式准备全,一般为 mp4 , gov , webm ;

用在IOS和android设备上的图片( gif , png , jpg , jpeg ) ;

当然还有插件本身,猛戳这里下载—-> jQuery.vide.js

资源路径示例:

path/
├── to/
│   ├── video.mp4
│   ├── video.ogv
│   ├── video.webm
│   └── video.jpg

使用方法

在</body>之前加入引用

<script src="js/jquery.min.js"></script>
<script src="js/jquery.vide.min.js"></script>

在需要添加视频背景的标签上添加自定义属性,如:

<div style="width: 1000px; height: 500px;"
    data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>

其中 data-vide-bg  属性中的前半段,path/to/ 是指的视频存放路径,后半段 video 是指的视频文件的名称

视频路径和视频名称可以分开写和分开命名,如:

data-vide-bg="mp4: path/to/video1, webm: path/to/video2, ogv: path/to/video3, poster: path/to/poster"

在 data-vide-options 中添加视频属性,如: 

data-vide-options="loop: false, muted: false, postion: 0% 0%

这两个属性也可以在JS里面编写,如:

$("#myBlock").vide("path/to/video");
$("#myBlock").vide("path/to/video", {
...options...
});
$("#myBlock").vide({
    mp4: path/to/video1,
    webm: path/to/video2,
    ogv: path/to/video3,
    poster: path/to/poster
}, {
    ...options...
});

$("#myBlcok").vide({
    volume: 1, //音量
    playbackRate: 1, //播放速率
    muted: true, //是否静音
    loop: true, //是否循环播放
    autoplay: true, //是否自动播放
    position: "50% 50%", // 视频位置定位
    posterType: "detect", // 是否检测有静态图片(jpg,png,gif,jpeg)
    resizing: true // 是否自动调整大小
});

写的有点小乱,不过应该还能看懂啊

发表评论

电子邮件地址不会被公开。 必填项已用*标注