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

时间 2019-11-17

标签 video 标签实现简单视频背景遇到问题没法显示不能自动播放繁體版

原文原文链接

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

1.video标签简介

video标签订义视频，就是能够在网页上实现视频的播放，详情见http://www.w3school.com.cn/tags/tag_video.asphtml

<video src="视频地址">
您的浏览器不支持 video 标签。//Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。
</video>

属性以下图：浏览器

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

代码改一下视频的src就能够直接使用了ide

<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>

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

（1）网站

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

type="video/mp4"，我加了以后仍是有问题，网页仍是一片空白。再查了一下发现视频不能直接改后缀，必定要是原来的格式。因此通常仍是不要直接改后缀，若是就想用这个视频的话，能够切网上找那些像格式工厂类的软件来转换格式。spa

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

muted
这个简单说加上以后视频就会静音，可是视频能够自动播放了，浏览器通常不会再用户不一样意的状况下就播放出媒体声音，这是不容许的，因此有声音就不能自动播放，自动播放就没有声音