转载

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

正文到此结束

所属分类：编程技术

本文标签： ip HTML web CTO rmi GitHub IDE http src js example https onchange git Select
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二