jQuery视频背景插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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"
  
});

该jQuery视频背景插件的github地址为：https://github.com/mikeludemann/backgroundVideo