当前位置:主页 > 网页特效 > 播放器代码 >

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

发布时间:2018/08/01 来源:互联网 浏览: 关键词:HTML5 播放器代码 
移动友好的HTML5全屏背景视频特效插件 移动友好的HTML5全屏背景视频特效插件
阿里云

简要教程

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

安装

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

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

使用方法

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

<scripttype="text/javascript"src="js/Vidage.min.js"></script>      

HTML结构

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

<divclass="Vidage">
    <divclass="Vidage__image"></div>
 
    <videoid="VidageVideo"class="Vidage__video"preload="metadata"loop autoplay muted>
        <sourcesrc="videos/bg.webm"type="video/webm">
        <sourcesrc="videos/bg.mp4"type="video/mp4">
    </video>
 
    <divclass="Vidage__backdrop"></div>
</div>          

初始化插件

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

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

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

import Vidage from'./Vidage';
newVidage(selector [, helperClass ]); 

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

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top