HTML5 Video标记不能播放.mp4视频的解决方法

最近有网友找来求助：用Phpcms做的视频网站，为什么一些MP4格式的视频不能用默认的Video标签播放？许久没跟大家分享企业建站程序方面的心得，今天在这里与大家探讨下H5网页Video视频标记，分享HTML5 Video标记不能播放.mp4视频的解决方法。

HTML5是 HyperText Markup Language 5 的缩写，简称H5，也就是1997年产生的HTML4互联网标准之后的新一代互联网语言描述方式，在 2012 年就已经成了稳定的版本。几年前国内浏览器厂商众多，受Windows系统IE的存在，国内的HTML5应用范围不大，企业网站搭建大多以PC为主，再后台随着手机使用越来越频繁，变成PC+WAP的方式，也就是在PC台式网站基础上增加手机网页。而在最近两三年，随着Windows XP的硬件落伍、IE的消亡，逐渐制作HTML网页不用再考虑IE6、IE8的兼容，HTML5响应式网站逐渐流行，大家也可以从CMSYOU展示的部分案例中可以看出来，最近几年我们大多做的是响应式企业网站了。

同时，随着Adobe2020年12月31日之后不再支持Flash Player，HTML5越来越主流，于是乎，响应式网站成主流，逐渐有需求做手机网站的客户也认同H5建站。之前动画、视频是用Flash，而今主流视频播放器已经是HTML5视频播放器，或者直接是Video原生标记。而今天探讨的问题就是Video原生标记所需要的视频格式的问题。

HTML5视频标记示范：

<video width="600px" height="400px" controls="controls" loop="loop" autoplay="autoplay" muted="muted" poster="./sources/83383144.jpeg">

   <source src="/uploadfile/cmsyou.mp4" type="video/mp4">

   <source src="/uploadfile/cmsyou.ogg" type="video/ogg">

</video>

比较奇怪，用Phpcms做的视频网站，为什么一些MP4格式的视频不能用默认的Video标签播放？有一些却可以，不是大小的问题，检查了好久，是不是Phpcms的限制？

这是因为.mp4也存在H264、MPEG4、H264、VP6这几个编码模式，CMSYOU实际检查测试发现，浏览器对.mp4的视频文件编码方式要求非常严格，视频编码必须是：H.264，验证方法：将视频按住拉动到支持HTML5的浏览器，按是否能用浏览器直接播放。

也就是说要解决HTML5 Video标记不能播放.mp4视频，还得从视频本身的编码着手，需要采用视频转换软件将MPEG4的编码方式转为H.264。常见的视频软换软件有格式工厂、VideoConverter等。

转换时，视频模式选择x264编码模式、音频模式选择AAC编码模式。

CMSYOU实际测试时发现，部分MPEG4编码的.mp4视频ios自带的浏览器可以播放浏览，而PC、安卓浏览器不能播放，也是由于自身编码问题引起的。

是否可以从前段播放器层面解决视频编码问题？行内暂时还没解决方法，碰到HTML5 Video标记不能播放.mp4视频时，暂时只能对实际视频文件进行转码。希望早日能有完善的解决方案，欢迎大家留言探讨。