音频/视频

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

(0)

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

阿里云

热评文章

发表评论

嘿,欢迎咨询!