神刀安全网

Vidage.js – 网页背景视频 / 图片

Vidage.js

Your solution to Background Video & Image

Vidage.jswill automatically hide and pause the video for touch devices and/or small screens (34em) and instead show the fallback image. It determines whether to do that or not, on the canplay , resize and orientationchange (probably not necessery) events. It uses one module as dependency – lodash/debounce .

Demo

Take a look at this simple, yet – beautiful example .

Bower

bower install vidage –save

NPM

npm install vidage –save

How to use it

You may use Vidage on one of the following ways:

Add boilerplate/template in your 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>

Regular way

<script src="scripts/Vidage.min.js"></script> <script>     new Vidage(selector [, helperClass ]); </script>

ES6 way

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Vidage.js – 网页背景视频 / 图片

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址