页面布局-jQuery插件之视频背景插件

backgroundVideo.js是一个jQuery视频背景插件。 jQuery视频背景插件在整个页面或指定的容器中嵌入HTML5视频,并提供自动播放,视频预加载,无限循环等。

使用方法

在页面中引入jquery以及backgroundVideo.js文件。

<script src="jquery.min.js"></script>
<script src="backgroundVideo.js"></script>

HTML结构

然后在页面中创建一个视频容器元素。

<div id="test-vedio"></div>

初始化插件

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

$("#test-vedio").backgroundVideo({
  mp4: "bg.mp4"
});

该jQuery视频背景插件不仅支持mp4格式,还支持下面的视频格式。

$("#test-vedio").backgroundVideo({
    mpeg: "path/to/mpeg-file",
    mp4: "path/to/mp4-file",
    webm: "path/to/webm-file",
    ogg: "path/to/ogg-file",
    quicktime: "path/to/quicktime-file",
    x_msvideo: "path/to/x-msvideo-file",
    m4v: "path/to/m4v-file",
    rtf: "path/to/rtf-file",
});

配置参数

该jQuery视频背景插件可用的配置参数有:

$(".wrapper").backgroundVideo({
 
  // enables autoplay
  autoplay: true,
 
  // shows video controls
  controls: false,
   
  // enables cross origin
  crossOrigin: false,
 
  // Start and End time in the console
  buffered: false, 
 
  // "auto" | "metadata" | "none"
  preload: false,
 
  // is muted?
  muted: true,
 
  // enables infinite loop
  loop: true,
 
  // path to poster image
  poster: "path/to/image-file",
 
  // custom text when Your browser does not support HTML5 video
  notSupportedText: "Your browser does not support HTML5 video.",
 
  // video ID
  settingID: "myVideo",
 
  // shows web video text tracks information
  track: false,
  track_src: "path/to/vvt-file",
  track_kind: "subtitle",
  track_srclang: "en",
  track_label: "test"
   
});

源码来源:https://github.com/mikeludemann/backgroundVideo

在线预览 网盘下载

郑重声明:

1 本资源来源于互联网,资源的版权归资源原作者所持有,受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系,所以上传的部分资源无法先通过原作者的同意就分享给大家了,如本资源侵犯了您(原作者)的权益,请联系我们(微信号 xiaohaimei1989),我们会立马删除您的资源,并向您表达诚挚的歉意!

3 本站是一个公益型网站,分享资源的目的在于传播知识,分享知识,收取一点点打赏的辛苦费是用于网站的日常运营开支,并非用于商业用途。

4 本站资源只提供学习和参考研究使用,使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

发表评论