jQuery和HTML5视频背景插件

当前位置:主页 > Html5库 > 音频视频播放器 > jQuery和HTML5视频背景插件
jQuery和HTML5视频背景插件
分享:

    插件介绍

    videoBackground.js是一款jQuery和HTML5视频背景插件。该jQuery和HTML5视频背景插件支持HTML5视频和YouTube视频,使用起来非常简单。

    浏览器兼容性

    浏览器兼容性
    时间:2018-06-14
    阅读:
简要教程

videoBackground.js是一款jQuery和HTML5视频背景插件。该jQuery和HTML5视频背景插件支持HTML5视频和YouTube视频,使用起来非常简单。

安装

可以通过npm来安装videoBackground.js插件。

npm install video_background
                

使用方法

在页面中引入jquery和videoBackground.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/videoBackground.js"></script>
                
HTML结构

使用时,用一个<div>元素将vedio元素包裹起来。

<div class="img-wrap html-video-background">
    <video src="video/mov_bbb.mp4" autoplay muted></video>
</div>
                

可以通过data-video-background属性来指定视频的纵横比。

<div class="img-wrap html-video-background"  data-video-background='{"ratio_x": 16, "ratio_y": 9}'>
    <video src="video/mov_bbb.mp4" autoplay muted></video>
</div>
                
初始化插件

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

$('.html-video-background').videoBackground();
                

配置参数

ratio_xratio_y也可以在初始化时作为配置参数传入。

$('.html-video-background').videoBackground({
    ratio_x: 16,
    ratio_y: 9,
});
                

该jQuery和HTML5视频背景插件的github地址为:https://github.com/lemehovskiy/videoBackground

下一篇:没有了

网友评论