MENU

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

• May 16, 2018 • Read: 614 • 必看

演示

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

Tags: 分享
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

已有 2 条评论
  1. joe

    博主 我添加视频后 到前端展示时为什么没有声音啊

    1. 不死鸟

      @joe自己添加audio 标签。 网页已经更新了

0:00