网库网(www.wangkuwang.com)精品网站源码,织梦建站模版,游戏源代码分享平台

模板户源码

当前位置:首页 -> CMS教程 -> 其它教程 正文

HTML5全屏背景视频jQuery插件

时间:2018-10-12 23:14:39 [整站源码]作者:zhaopulei


HTML5cn

  vidbg是一款基于HTML5的全屏背景视频jQuery插件。通过该jQuery插件可以在容器中插入视频,也可以将视频作为页面的全屏背景。该视频插件使用简单,兼容IE9以上的浏览器。它的特点还有:

  支持所有的现代网页浏览器。

  兼容IE9+浏览器。

  视频会在桌面设备和笔记本电脑上播放,在移动设备(平板和手机等)上会回退为显示视频的封面。



  使用方法

  使用Vmc Slider需要引入jQuery和vidbg.min.js。

1<script type="text/javascript" src="jquery.min.js"></script>
2<script type="text/javascript" src="vidbg.min.js"></script>



  初始化插件

  该HTML5全屏背景视频插件有两种初始化方法:通过HTML标签和是用Javascript来初始化。

  通过HTML标签初始化:

1<div class="vidbg-box" style="width: 650px; height: 338px;"
2 data-vidbg-bg="mp4: http://example.com/video.mp4,
3 webm: path/to/video.webm,
4 poster: path/to/poster.jpg"
5 data-vidbg-options="loop: true, muted: true, overlay: true">
6</div>



  通过Javascript来初始化:

1$('.vidbg-box').vidbg({
2 'mp4': 'http://example.com/video.mp4',
3 'webm': 'path/to/video.webm',
4 'poster': 'path/to/fallback-image.png',
5}, {
6 // 参数选项
7});


  注意要为视频文件提供.webm和.mp4两种格式,使其适应各种浏览器的需要。

  全屏视频只需要将选择器设置为body元素即可。

  配置参数

1{
2 volume: 1,
3 playbackRate: 1,
4 muted: true,
5 loop: true,
6 position: '50% 50%',
7 resizing: true,
8 overlay: false,
9}


  当resizing参数设置为true时,视频会随着浏览器窗口的缩放而缩放。

  设置overlay为true时,会为视频添加一个轻微的模糊遮罩


查看演示与下载插件请点击阅读原文


HTML5中国联系方式

商务合作QQ:215212978

HTML5技术交流群:424839972

投稿邮箱:html5cn@html5cn.org

点击【阅读原文】查看更多资讯

    阅读原文
    阅读原文

    本文标签:AutoTags插件服务端需要您提供购买者的账号和密码才能继续访问  折翼天使  莎莎源码  吾爱源码  其他源码 

    转载请注明来源:PHP手机端发卡多种支付商业版源码

    本文永久链接地址:https://www.suibianlu.com/11942.html

    郑重声明:
    本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。
    若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法链接失效或侵犯版权,请给我们来信:admin@suibianlu.com

    栏目导航
    最新文章
    热门文章
    QQ在线客服

    服务热线

    织梦建站咨询
    Top