转载

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 ]);
原文  https://github.com/dvLden/Vidage
正文到此结束
Loading...