video标签简介
video标签定义视频，就是可以在网页上实现视频的播放，详情见http://www.w3school.com.cn/tags/tag_video.asp
<video src="视频地址"> 您的浏览器不支持 video 标签。//Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。 </video>
属性如下图：
视频背景
最近看网上有一些网站首页背景是炫酷的视频背景，就想模拟一个
1.简要的视频背景制作（代码意思见代码注释）
代码改一下视频的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
这个简单说加上之后视频就会静音，但是视频可以自动播放了，浏览器一般不会再用户不同意的情况下就播放出媒体声音，这是不允许的，所以有声音就不能自动播放，自动播放就没有声音
vedio标签自适应外部div
如果需要做一个视频播放网页，将视频固定在一个框中，让视频适应外部div的大小
当时参考的是
雨墨清秋的这篇文章，有用
https://www.cnblogs.com/zzq-229/p/11446807.html
这里记录一下
想要video能自动填充慢父div的大小，只要给video标签加上style="100%; height:100%; object-fit:fill"即可。 object-fit语法 object-fit属性的语法非常的简单： object-fit:fill | contain | cover | none | scale-down
video控件的隐藏
相关属性是
controls
// 隐藏video 音量按钮 video::-webkit-media-controls-mute-button { display: none !important; } // 隐藏video 当前按钮 video::-webkit-media-controls-current-time-display { display: none !important; } // 隐藏video 总时间 video::-webkit-media-controls-time-remaining-display { display: none !important; } // 隐藏video 全屏按钮 video::-webkit-media-controls-fullscreen-button { display: none !important; }