导航

vidage.js:网页全屏视频背景

演示

lai.yuweining.cn/404/

需要用到:vidage.cssvidage.js

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

如何使用
<div class="Vidage">
    <div class="Vidage__image"></div>
    <video id="VidageVideo" class="Vidage__video" preload="metadata" loop="" autoplay="" muted="">
        <source src="video.mp4" type="video/mp4">
    </video>
</div>
加载样式
<link href="vidage.css" rel="stylesheet" />
加载脚本
 <script src="vidage.js"></script>
<script>
    new Vidage('#VidageVideo');
</script>
加载音乐 (视频使用 vidage.js作为网页背景全屏播放的同时,视频将不会播放声音。播放声音,需要自己单独添加audio 标签)
<audio autoplay="" loop="">
<source src="music.mp3" type="audio/mpeg">
</audio> 

项目地址:github.com/dvLden/Vidage

返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码