jquery插件jquery.vide.js实现的视频作为全屏背景示例

jquery插件jquery.vide.js实现的视频作为全屏背景示例
jquery.vide.js是一款将视频作为网页背景的jQuery插件,支持所有现代浏览器。本文将使用bootstrap作为排版布局,结合jquery.vide.js实现视频背景演示。

入门指南

使用教程

视频准备:

准备的视频格式可以是多种格式,如:.mp4 /.ogv/.webm 等,大概就是浏览器支持的HTML5视频格式,再有一张视频缩略图,结构大致如下:

video/
│   ├── ocean.mp4
│   ├── ocean.ogv
│   ├── ocean.webm
│  └── ocean.jpg

视频资源也可以使用全路径方式,比如本站提供的示例就是使用的全路径方式。

插件使用方法介绍:

方法一、标签方式-最简单的方式就是在想要实现视频背景的标签上添加一个data-vide-bg 的属性,值为视频路径和缩略图路径,可以配置多个。要配置更多参数就需要再加一个data-vide-options的属性,格式如下:

<div style="width: 1000px; height: 500px;"
  data-vide-bg="mp4: path/to/video1, webm: path/to/video2, ogv: path/to/video3, poster: path/to/poster"
  data-vide-options="posterType: jpg, loop: false, muted: false, position: 0% 0%">
</div>

方法二、脚本方式-脚本方式其实也很简单,格式如下:

$('#videoBgDemoWrapper').vide('video/ocean.mp4'); //最简单的单个视频方式
$('#videoBgDemoWrapper').vide('video/ocean.mp4', {posterType: "jpg", loop: false, muted: false});//单个视频带有参数方式

$('#videoBgDemoWrapper').vide({ //多个视频方式
      mp4: path/to/video1, 
      webm: path/to/video2, 
      ogv: path/to/video3, 
      poster: path/to/poster
}, {
    posterType: "jpg",
    loop: false,
    muted: false,
    ...
});

本站提供示例(视频作为全屏幕背景):

1、引入依赖库

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery/3.3.1/jquery.min.js"></script>
<script src="js/vide/jquery.vide.min.js"></script>

2.CSS样式

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}
#content {
    background: #fff;
    opacity: 0.9;
    margin: 50px 30px;
    padding: 15px;
}

#content h1 {
    font-size: 20px;
    margin-bottom:30px;
    text-align: center;
}

3、HTML标签(部分代码)

<body data-vide-bg="http://vjs.zencdn.net/v/oceans.mp4">
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <div id="content">
                <h1>jquery.vide.js视频作为全屏幕背景示例</h1>
                <h5>2018年俄罗斯世界杯(英语:2018 FIFA World Cup)</h5>
                <p>2018年俄罗斯世界杯是国际足联世界杯足球赛举办的第21届赛事。比赛于2018年6月14日至7月15日在俄罗斯举行,这是世界杯首次在俄罗斯境内举行,亦是世界杯首次在东欧国家举行。</p>
                <p>
                    <a href="block-bg.html">jquery.vide.js部分区域有视屏背景示例</a>
                </p>
            </div>
        </div>
    </div>
</body>

这样就完成了jquery.vide.js实现全屏背景的示例。

the end