web前端入门到实战:HTML5实现首页动态视频背景
2019-12-19 20:16
1516 查看
你想实现动态视频作为背景的首页吗?来,一起来学习,本文将带你一起实现H5动态视频背景;
首先网上找一段清晰的视频下载下来,最好是MP4格式的;下载好了之后我们新建一个html文件来写代码:
html代码:
<video id="v1" autoplay loop muted> <source src="./video2.mp4" type="video/mp4" /> </video>
一个video标签包裹着,source代表来源文件,autoplay属性是自动播放,loop代表循环播放,muted代表无声播放;
如果不加入autoplay属性是无法自动播放的,页面将会黑屏展示;
css代码:
*{ 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; }
css代码主要是进行定位和放大达到全屏播放的效果,主要是对video进行宽高之类的设置,还有别忘了要给z-index给个值,让放置在底部,只要小于0都可以,没有影响;
就这样我们的动态视频背景就完成了,如果想设置播放速度,我们可以添加js代码(video标签加上id=“v1”属性):
var video= document.getElementById(‘v1‘); video.playbackRate = 1.5;
那么如果我们想要添加内容到页面上怎么办呢?
<video id="v1" autoplay loop muted> <source src="./video2.mp4" type="video/mp4" /> </video> <h1 style="color:white">123465</h1> 学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧 (从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
是的,在video标签外部添加,然后我们的效果图就是这样的(由于博客对图片大小有限制,所以截屏时间没有很长)
相关文章推荐
- 【Web前端特训班试听课】HTML5 & Node.js 博客项目实战入门-曾老师-专题视频课程...
- 【教程视频】HTML5与CSS3与JavaScript实现动态网页系列课程+项目实战
- PHP视频教程源码书籍web前端ThinkPHP5/5.0商城实战开发html5秒杀
- web前端,jquery实现瀑布流总结7,jq动态添加div等元素
- android--------WebView实现 Html5 视频标签加载
- web前端入门到实战:彻底掌握css动画【transition】
- <web前端>当背景图片为渐变色图片时,为避免浏览器大小问题,可以选择使用<CSS>实现渐变色,教程如下
- Web前端开发,利用HTML5 Canvas实现监控系统页面展示
- android--------WebView实现 Html5 视频标签加载
- 淘试客H5前端web项目实战、HTML5+css3项目案例分享
- 前端开发入门到实战:css实现修改浏览器自动填充表单的默认样式
- Android视频背景,动态背景,Android用视频做背景的轻松实现
- html5视频全屏背景插件(支持全屏背景,标签实现)
- 黑马十次方Web前端开发实战视频教程
- 前端开发入门到实战:HTML5新增和废弃的标签
- web前端自学入门视频教程分享
- html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
- android--------WebView实现 Html5 视频标签加载
- Web前端HTML+CSS+JS初级入门视频课程 001
- Android如何让WebView中的HTML5页面实现视频全屏播放