HTML5全屏背景视频特效插件Vidage.js(支持移动端)

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

Demo

传送门

如何使用


<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>

在中添加样式(确保文件路径正确)


<link href="styles/Vidage.css" rel="stylesheet" />

然后使用脚本以下列方式之一(确保文件路径正确)


// 常规方式
<script src="scripts/Vidage.js"></script>
<script>
    new Vidage(selector);
</script>

//ES6方式
import Vidage from './Vidage';

new Vidage(selector);

GIThub主页

传送门

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/605.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:
顶部 评论 底部