最近看网上有一些网站首页背景是炫酷的视频背景，就想模拟一个

1.video标签简介

video标签定义视频，就是可以在网页上实现视频的播放，详情见http://www.w3school.com.cn/tags/tag_video.asp

<video src="视频地址">

您的浏览器不支持 video 标签。//Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。

</video>

属性如下图：

2.简要的视频背景制作（代码意思见代码注释）

代码改一下视频的src就可以直接使用了

<html lang="en">
<head>

    <meta charset="UTF-8">

    <title>视频背景网页</title>

    <style type="text/css">

    .video_back{

        /*设置视频最小宽度和高度*/

        min-width: 100%;

        min-height: 100%;

        /**/

        width:auto;

        height:auto;

        /*生成绝对定位的元素，相对于浏览器窗口进行定位。*/

        position: fixed;

        /*这里我试了一下好像只要是矩形的四个角的的点都行,也就是说right:0;bottom:0;也可以*/

        left: 0;

        top: 0;

        /*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/

        z-index: -9999;

    }

    .wen{

    font-size: 30px;

    color: #fff;

    }

    </style>

</head>

<body>

<video class="video_back" src="./back.mp4" type="video/mp4"  muted autoplay="autoplay" loop="loop">

您的浏览器不支持

</video>

<div class="wen">这是一个简单的视频背景</div>

</body>

</html>

3.遇到问题

<video class="video_back" src="./back.mp4" type="video/mp4"  muted autoplay="autoplay" loop="loop">

您的浏览器不支持

</video>

上面代码中有一些比较坑的地方

（1）

./back.mp4是我自己下载好的视频，原来的格式是.blv格式，可是这个格式video不支持，出不来视频，我就直接改了它的后缀，改成了.mp4，结果还是出不来，然后我网上找了解决问题的方法，发现没有加

type="video/mp4"，我加了之后还是有问题，网页还是一片空白。再查了一下发现视频不能直接改后缀，一定要是原来的格式。所以一般还是不要直接改后缀，如果就想用这个视频的话，可以切网上找那些像格式工厂类的软件来转换格式。

（2）改好格式后，页面不是白的了，有视频了，我加了autoplay="autoplay"属性可是视频不自动播放，然后当然又是查找解决问题的方法啊，之后就发现了

muted
这个简单说加上之后视频就会静音，但是视频可以自动播放了，浏览器一般不会再用户不同意的情况下就播放出媒体声音，这是不允许的，所以有声音就不能自动播放，自动播放就没有声音

												


											
video标签实现简单视频背景+遇到问题(视频无法显示，不能自动播放)的更多相关文章
	

    
								
  1. html5中的video标签和audio标签
		
    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
    
		
    2. 
						
  2. html页面原生video标签隐藏下载按钮
		
    在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题. 虽然简介视频是非付费的,但也不希望会有下载按钮或者 ...
    
		
    3. 
						
  3. 大事记 - 安卓微信浏览器 video 标签层级过高
		
    // 为什么叫<大事记>? // 以前总有面试官问这样一个问题:“你在项目中遇到过最头疼的问题是什么,是怎么解决的?” // 当时总觉得,已解决的问题都算不上头疼,所以回答总是不尽人意.  ...
    
		
    4. 
						
  4. 手机浏览器自动播放视频video（设置autoplay无效）的解决方案
		
    1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...
    
		
    5. 
						
  5. video实现有声音自动播放
		
    video实现自动播放有声音 需求:老板见人家可以的,我们的也要可以!!! 前端:自动播放,简单... 要实现:鼠标移入视频播放同时有声音,移出让你暂停,,,,, 问题集合 1- 自动播放实现没有声音 ...
    
		
    6. 
						
  6. h5中嵌入视频自动播放的问题
		
    在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...
    
		
    7. 
						
  7. 巧用transform实现HTML5 video标签视频比例拉伸
		
    前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...
    
		
    8. 
						
  8. HTML5 video标签播放视频下载原理
		
    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
    
		
    9. 
						
  9. 如何禁止 iPhone Safari video标签视频自动全屏？
		
    最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. kernel对NTP的API，系统调用函数
			
    kenrel API for NTP kernel 提供两个API(即系统调用 system call)给应用程序NTP,去校准kernel system clock Kernel Applicati ...
    
			
    2. 
						
  2. 基于Tags的简单内容推荐的实现
			
    原来为了简单方便,自己小网站上的文章页的相关内容推荐就是从数据库里随机抽取数据来填充一个列表,所以一点相关性都没有,更本没有办法引导用户去访问推荐内容. 算法选择 如何能做到相似内容的推荐呢,碍于小网 ...
    
			
    3. 
						
  3. 【Codeforces Round #505 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final) A】 Doggo Recoloring
			
    [链接] 我是链接,点我呀:) [题意] 你可以把出现次数大于1的颜色换成其他颜色. 问你最后能不能全都变成同一种颜色 [题解] 判断一下有没有出现次数大于1的就好. 有的话.显然可以一直用它变颜色. ...
    
			
    4. 
						
  4. @Bean 指定初始化和销毁方法
			
    bean 的生命周期 bean 的创建 --> 初始化 --> 销毁 ioc 容器管理 bean 的声明周期 可以自定义初始化和销毁方法 构造器( 对象创建 )被调用时机 单实例:在容器启 ...
    
			
    5. 
						
  5. 告诉你 SQL 数据库与 NoSQL 数据库的区别
			
    简单来说 SQL 数据库和 NoSQL 数据库有着共同的目标:存储数据,但存储的方式不同 一. 表 SQL中的表结构具有严格的数据模式约束: 存储数据很难出错. NoSQL存储数据更加灵活自由:可能导 ...
    
			
    6. 
						
  6. 机房-动环-江森ODS系统
			
    优势: 标准的BACnet系统平台 开放的集成特性 支持Desktop and Server平台 支持多达100个NxE 支持无线应用,可以手机访问 DCIM---数据中心基础架构管理平台介绍 不同于 ...
    
			
    7. 
						
  7. CF49A Sleuth
			
    CF49A Sleuth 题目描述 Vasya plays the sleuth with his friends. The rules of the game are as follows: tho ...
    
			
    8. 
						
  8. auto_ptr的使用和注意
			
    参考: http://www.cnblogs.com/qytan36/archive/2010/06/28/1766555.html
    
			
    9. 
						
  9. springMVC3.0（文件上传，@RequestMapping加參数,@SessionAttributes,@ModelAttribute，转发，重定向，数值获取，传參，ajax,拦截器)
			
    1.项目包结构例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsiz ...
    
			
    10. 
						
  10. Android框架简要介绍
			
    1.      Android架构直观图 下图展示了Android系统的主要组成部分: 总体上而言,Android系统结构由5个部分组成.从上到下,别人是Applications (Android应用 ...
    
			
    11.