html5视频作为页面背景

简介: 之前强哥在CSDN公众号上发过一个《html5视频作为页面背景》,当时的源码是没问题的,兼容IE和Chrome浏览器,可是后来因为Chrome更新了之后,视频文件无法自动播放了。在这里更新一下源码,亲测可用。

之前强哥在CSDN公众号上发过一个《html5视频作为页面背景》,当时的源码是没问题的,兼容IE和Chrome浏览器,可是后来因为Chrome更新了之后,视频文件无法自动播放了。在这里更新一下源码,亲测可用。


复制代码并且替换视频文件即可。当然,比较懒得同学,可以关注公众号,在后台回复:小视频。即可获取源代码和附带的mp4视频文件哦。


<!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;  
            /*加滤镜*/  
            /*-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 src="./movie.mp4" type="video/mp4"  />
Your browser does not support the video tag.
</video>
</body>
</html>


还有不懂得可以后台留言哦,强哥看到了会及时回复的。

相关文章
|
22天前
使用HTML编写注册页面
使用HTML编写注册页面
12 1
|
1月前
|
数据采集 前端开发 JavaScript
html 页面里 noscript 标签的作用介绍
html 页面里 noscript 标签的作用介绍
29 0
|
1月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
2月前
|
应用服务中间件
Tomcat8.5访问HTML页面出现乱码
Tomcat8.5访问HTML页面出现乱码
39 0
Tomcat8.5访问HTML页面出现乱码
|
3月前
|
JavaScript
用什么代码可以在页面添加html元素呢?
用什么代码可以在页面添加html元素呢?
|
8天前
错误或拦截页面的html代码
错误或拦截页面的html代码
12 0
错误或拦截页面的html代码
|
17天前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
18 0
|
1月前
六个好看实用的html简单登录页面源码
六个好看实用的html简单登录页面源码
19 0
六个好看实用的html简单登录页面源码
|
1月前
响应式个人二维码收款HTML页面源码
响应式个人二维码收款HTML页面源码
16 0
响应式个人二维码收款HTML页面源码
|
1月前
|
XML Java 数据格式
springboot 微服务项目如何集成 html 页面
springboot 微服务项目如何集成 html 页面
29 0