jquery背景视屏插件CoverVid

 查看演示  website  立即下载

让你的HTML5视频像一个背景封面图片用一个简单的jQuery扩展。使用非常简单,只要按照以下几步……

把covervid.min.js，和jquery.js文件添加到你的脚本文件夹并调用对应的地址。

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

重要的是要注意,视频将利你目标规模的父元素。记住这一点,我们将创建一些简单的标记,并添加一些基本样式大小视频/包装器元素。

<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>

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

现在,我们只需调用coverVid()函数在视频元素,通过本地视频的尺寸。

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

PREVIOUS:
NEXT:
jquery表格插件Bootstrap Table
jquery整屏滚动插件Scrollify