音频/视频

jQuery和HTML5视频背景插件

也想出现在这里?联系我们
面包多

jQuery和HTML5视频背景插件-创客云
videoBackground.js 是一款 jQuery 和 HTML5 视频背景插件。该 jQuery 和 HTML5 视频背景插件支持 HTML5 视频和 YouTube 视频,使用起来非常简单。

使用方法:

在页面中引入 jquery 和 videoBackground.js 文件。

也想出现在这里?联系我们
创客主机
  1. <script src="js/jquery.min.js"></script>
  2. <script src="js/videoBackground.js"></script>

HTML 结构:

使用时,用一个[div]元素将 vedio 元素包裹起来。

  1. <div class="img-wrap html-video-background">
  2.     <video src="video/mov_bbb.mp4" autoplay muted></video>
  3. </div>

可以通过 data-video-background 属性来指定视频的纵横比。

  1. <div class="img-wrap html-video-background"  data-video-background='{"ratio_x": 16, "ratio_y": 9}'>
  2.     <video src="video/mov_bbb.mp4" autoplay muted></video>
  3. </div>

初始化插件:

在页面 DOM 元素加载完毕之后,通过 videoBackground()方法来初始化该视频背景插件。

  1. $('.html-video-background').videoBackground();

配置参数:

ratio_x 和 ratio_y 也可以在初始化时作为配置参数传入。

  1. $('.html-video-background').videoBackground({
  2.     ratio_x: 16,
  3.     ratio_y: 9,
  4. });

github 地址:https://github.com/lemehovskiy/videoBackground

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!