让你的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