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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!