注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

超级易使用的jquery视频背景插件Vide

媒体 fishcity 1659浏览

jquery视频背景插件Vide

Vide是一款非常轻巧的jquery背景视频插件,只有3.6KB,使用非常简单,只需几行代码就可以实现。当然,因为太过于简单,那么使它有下面个点要注意的,请细看合不合用咯。

  1. 支持所有现代桌面浏览器。

  2. IE9 +

  3. iOS只使用本地播放器播放网页视频,所以插件在iOS禁用视频,只显示成全屏海报。

  4. 一些android设备播放视频,有些没有,为了统一,插件在android禁用视频,只显示成全屏海报。

jquery实例:Vide的使用方法

引入核心文件

<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.vide.js"></script>

请把你的视频格式成'.webm', '.mp4','.ogv',便于兼容浏览器,当然也需加一张.jpg, .png 或 .gif 的图片,视频没开始播放是显示。具体结构如下

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

完成以上工作,便可以写入html了。给元素加上data-vide-bg属性,并赋上视频与图片的所在路径,注意视频与图片名称需相同。添加data-vide-options属性来控制vide选项,默认设置:无声播放,循环插放,自动播放。

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

写入JS

//无参数
$("#myBlock1").vide("path/to/video");

//带参数
$("#yourElement").vide({
    volume: 1,
    playbackRate: 1,
    muted: true,
    loop: true,
    autoplay: true,
    position: "50% 50%", // 类同于CSS的 `background-position`属性
    posterType: "detect" // 图片类型,detect为自动检测.也可以直接写上jpeg,png,gif等
 });

方法

//取得实例
var instance = $("#yourElement").data("vide");

//取得背景视频对象
instance.getVideoObject();

// 重置背景视频大小(在浏览器窗口改变大小是自动调用)
instance.resize();

// 销毁实例
instance.destroy();

转载请注明:jQ酷 » 超级易使用的jquery视频背景插件Vide

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。