扫一扫分享
Vidage.js 是一款移动友好的 html5 全屏背景视频特效插件。Vidage.js 可以在手机或小屏幕设备(34em)上暂停和隐藏视频,并显示指定的图片。
使用下面的代码作为页面的全屏视频背景的 HTML 代码
<div class="vidage">
<video id="vidage" 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>
设置和导入所需的样式
// set the fallback-cover image
$vdg-fallback-image: url('../images/fallback.jpg');
// import package
@import '~vidage/src/styles/vidage';
导入JS模块并创建新实例
import Vidage from 'vidage'
new Vidage('#vidage')
手机预览