网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
该插件基于jquery实现,可以在任何容器元素中放置一个HTML5视频作为背景,如果浏览器不支持HTML5视频,将会使用一张图片作为背景。
使用方法:
1.引入jquery-tape-plugin.js和jquery-tape-styles.css文件
<link href="jquery-tape-styles.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="jquery-tape-plugin.js"></script>
2.定义HTML5视频的路径,该视频将作为特定容器的背景。
<div class="container"
id="example"
data-mp4="1.mp4"
data-webm="1.webm">
<div class="content">内容</div>
</div>
3.设置容器的大小和位置。
.container {
width: 600px;
height: 450px;
position: relative;
}
4.调用buildHtmlVideo函数
buildHtmlVideo({
parentElement: $("#parentContainer")
});
5.确定是否在移动设备、平板电脑或pc上自动播放HTML5视频。
buildHtmlVideo({
parentElement: $("#parentContainer"),
playInMobile: true,
playInTablet: true,
playInDesktop: true
});
6.指定替换视频背景的图像。
buildHtmlVideo({
parentElement: $("#parentContainer"),
fallbackImage: "1.jpg"
});
7.默认值data属性:
buildHtmlVideo({
parentElement: $("#parentContainer"),
webmVideo: $("#parentContainer").attr("data-webm"),
mp4Video: $("#parentContainer").attr("data-mp4")
});
8.在插件初始化后执行回调函数。
buildHtmlVideo({
parentElement: $("#parentContainer"),
callback: function() {
console.log("Build complete");
}
});
9.如果要在视频背景的顶部显示文本内容,需要设置absolute并调整z-index属性
.content {
z-index: 9999;
position: absolute;
top:2rem; left: 2rem;
}
转载请注明来源:jquery+tape.js将HTML5视频作为页面背景特效
本文永久链接地址:https://www.moyouyouw.cn/code/640.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论