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

全屏jquery视频背景插件CoverVid

媒体 fishcity 2648浏览

全屏jquery视频背景插件CoverVid

CoverVid只需用一个简单的jQuery插件,就可以让你的HTML5视频变成一个动态背景封面图片,简单的说视频也可以用作背景了。CoverVid使用非常简单,只要按照以下几步……

引入核心文件,且记covervid.min.js 要在jquery之后

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="covervid.min.js"></script>

值得注意的是,目标视频是扫描它父元素的大小来实现自己的大小,基于此,,我们将创建一些简单的标记和添加一些基本样式来设定视频父元素的大小。以下是html代码

<div class="covervid-wrapper">
    <video class="covervid-video" autoplay loop poster="img/video-fallback.png">
        <source src="videos/clouds.webm" type="video/webm">
        <source src="videos/clouds.mp4" type="video/mp4">
    </video>
</div>

以下是基本的CSS样式

.covervid-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 }

现在,我们把coverVid()绑定到视频元素上,并通过函数参数传递视频的尺寸。

$('.covervid-video').coverVid(1920, 1080);

转载请注明:jQ酷 » 全屏jquery视频背景插件CoverVid

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