让你的HTML5视频像一个背景封面图片用一个简单的jQuery扩展。使用非常简单,只要按照以下几步……
把covervid.min.js,和jquery.js文件添加到你的脚本文件夹并调用对应的地址。
1 2 | <script src="covervid.min.js"></script> |
重要的是要注意,视频将利你目标规模的父元素。记住这一点,我们将创建一些简单的标记,并添加一些基本样式大小视频/包装器元素。
1 2 3 4 5 6 | <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> |
1 2 3 4 5 6 7 | .covervid-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} |
现在,我们只需调用coverVid()函数在视频元素,通过本地视频的尺寸。
1 | $('.covervid-video').coverVid(1920, 1080); |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com