VUE如何实现html5视频作为页面背景
Posted 田林家园
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE如何实现html5视频作为页面背景相关的知识，希望对你有一定的参考价值。
之前的代码因为chrome的升级，视频文件无法自动播放了。在这里更新一下源码，亲测可用。
<!DOCTYPE html>
<html>
<style>
*{
margin: 0px;
padding: 0px;
}
video{
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
/*加滤镜*/
/*filter: blur(15px); //背景模糊设置 */
/*-webkit-filter: grayscale(100%);*/
/*filter:grayscale(100%); //背景灰度设置*/
z-index:-11
}
source{
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
}
p{
width: 100%;
text-align: center;
font-size: 40px;
color: white;
}
</style>
<body>
<p>大家好 </p>
<p>大家好 </p>
<p>大家好 </p>
<p>大家好 </p>
<p>大家好 </p>
<p>大家好 </p>
<video autoplay loop muted>
<source type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
</html>
以上是关于VUE如何实现html5视频作为页面背景的主要内容，如果未能解决你的问题，请参考以下文章
京东个人中心——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面
解析vue-router到html5的pushState replaceState是如何实现页面不刷新而时时刷新数据的