video标签实现简单视频背景+遇到问题(视频无法显示,不能自动播放)

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

1.video标签简介

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

<video src="视频地址">
您的浏览器不支持 video 标签。//Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。
</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标签实现简单视频背景+遇到问题(视频无法显示,不能自动播放)

上一篇:Dynamic CRM 2013学习笔记(二十六)报表设计:Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色


下一篇:【原创】构建高性能ASP.NET站点之二 优化HTTP请求(前端)