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>


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

相关文章
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
|
17天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
40 2
|
1月前
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
36 3
|
1月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
33 1
|
2月前
|
移动开发 编解码 监控
HTML5 Video(视频)作为背景的优化方案
使用 HTML5 `&lt;video&gt;` 标签作为网页背景视频可以提升视觉效果,但需优化以确保性能和用户体验。主要方法包括:选择合适的视频格式(MP4、WebM、Ogg)和分辨率(720p 或更低),压缩文件大小,确保视频静音和循环播放,使用 CSS 设置全屏样式,根据设备和网络条件加载视频或静态图像,使用 `playsinline` 属性和延迟加载技术提高性能,确保无障碍性,并监控页面加载时间。合理应用背景视频可增强网站视觉效果而不影响用户体验。
|
2月前
|
移动开发 编解码 前端开发
HTML5 <video>视频详解
HTML5引入了内置的`&lt;video&gt;`标签,简化了网页中视频的嵌入与播放。本文详细介绍了HTML5视频的基本语法、常用属性(如controls、autoplay等)、示例代码及使用注意事项,包括浏览器兼容性、跨域请求处理和响应式设计。通过JavaScript还可实现对视频播放的动态控制。掌握这些技巧,有助于提升网站的多媒体体验。
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
44 6
|
28天前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
58 0
|
1月前
|
XML Web App开发 数据格式
HTML 页面显示 XML 数据
10月更文挑战第2天