移动友好的HTML5全屏背景视频特效插件

当前位置:主页 > Html5库 > 音频视频播放器 > 移动友好的HTML5全屏背景视频特效插件
移动友好的HTML5全屏背景视频特效插件
分享:

    插件介绍

    Vidage.js是一款移动友好的HTML5全屏背景视频特效插件。Vidage.js可以在手机或小屏幕设备(34em)上暂停和隐藏视频,并显示指定的图片。

    浏览器兼容性

    浏览器兼容性
    时间:2016-06-24
    阅读:
麦子学院
简要教程

Vidage.js是一款移动友好的HTML5全屏背景视频特效插件。Vidage.js可以在手机或小屏幕设备(34em)上暂停和隐藏视频,并显示指定的图片。

安装

可以通过bower或npm来安装该视频插件。

bower install vidage --save
npm install vidage --save                  
                

使用方法

在页面中引入Vidage.min.js文件。

<script type="text/javascript" src="js/Vidage.min.js"></script>               
                
HTML结构

使用下面的代码作为页面的全屏视频背景的HTML代码。

<div class="Vidage">
    <div class="Vidage__image"></div>

    <video id="VidageVideo" class="Vidage__video" preload="metadata" loop autoplay muted>
        <source src="videos/bg.webm" type="video/webm">
        <source src="videos/bg.mp4" type="video/mp4">
    </video>

    <div class="Vidage__backdrop"></div>
</div>                 
                
初始化插件

通过new Vidage()来实例化一个Vidage对象。

<script>
    new Vidage(selector [, helperClass ]);
</script>             
                

如果使用的是ES6,方法如下:

import Vidage from './Vidage';

new Vidage(selector [, helperClass ]);      
                

Vidage.js插件的github主页地址为:https://github.com/dvLden/Vidage

网友评论