前段时间赶静态页面作业，卡了最久的问题就是html如何添加视频，网上乱七八糟的教程鱼龙混杂，要么代码残缺，要么压根不适配新手，白白浪费大半天时间。
一开始完全摸不着头脑，傻乎乎的直接把视频文件路径粘贴进a标签里，还天真以为点击链接就能直接播放。页面刷新之后，压根没有播放窗口，只会弹出下载视频的提示。折腾半天都没搞懂问题出在哪，甚至怀疑是不是视频格式的问题，连着转换了MP4、AVI两种格式，结果还是一模一样。
说白了，链接跳转和内嵌播放根本是两码事，a标签只能用来跳转、下载资源，做不到在网页内部加载播放视频。
后面翻了之前存的零碎笔记，才想起html自带专属的视频播放标签video，这也是目前最简单、适配性最高的添加方式。
最基础的写法简单到离谱，只需要三行基础代码就能搞定。搭建好基础html结构后，在body标签内部插入就行。这里要注意路径填写，很多新手包括我当初都容易搞错，视频和html文件放在同一个文件夹里，直接填文件名加后缀就行，放在子文件夹就要补全相对路径。
光是能播放还不够，光秃秃的视频窗口没有任何按钮，访客没法暂停、调节音量和进度。
折腾好久才搞明白，必须加上controls属性，这个属性不需要赋值，直接写在video标签内，就能自动生成系统自带的播放控件，适配电脑和手机端所有浏览器。
，这行代码就是新手做网页添加视频的最简版本，没有任何多余冗余代码。
别盲目跟风网上那些花里胡哨的自定义播放器，真的没必要。
我之前脑子发热，跟风引入第三方播放器插件，不仅要额外导入js、css文件，代码臃肿一大堆，还出现过部分浏览器加载空白的情况，纯属给自己增加没必要的工作量。
还有个极易被忽略的小细节，也是之前踩过的大坑。绝大多数浏览器只支持MP4格式的视频，WebM格式部分老旧版本浏览器无法识别，MOV、AVI这类格式直接无法加载。之前存了个MOV格式的素材，反复修改代码都播放失败，排查了快一小时，才发现根源就是格式不对，最后用格式工厂转成MP4，刷新页面瞬间就正常了。
另外视频体积也得把控一下。
之前直接上传了一个两分钟、几百兆的高清视频，本地打开一切正常，换到线上服务器之后，页面加载速度直接变慢，低配电脑打开页面甚至会卡顿。其实做网页展示，720P的清晰度就完全够用，压缩一下视频大小，能大幅优化网页加载体验。
偶尔也会遇到不想上传本地视频的情况，比如视频文件太大，占用服务器内存。这种情况不用纠结，直接复制第三方视频平台的通用播放链接，替换掉src里的本地路径就行，操作逻辑和添加本地视频一模一样，不用改动其他代码。
关掉编辑器的时候，盯着页面里正常播放的视频愣了几秒，现在想想当初最蠢的地方，就是明明只是一个简单标签就能解决的小事，非要绕无数弯路去试各种错误方法。