【记录处理Vue项目中Video.js播放不了MP4视频Bug】

一、项目场景：

在Vue项目中使用Video.js播放MP4视频。

---

二、问题描述

在项目中使用Video.js播放MP4视频。视频采集上来存在数据库，前端使用Video.js对视频进行播放。突然有一天，MP4视频播放不了，并且报错：

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.

---

三、原因分析：

并发现前一时间段采集到的MP4视频可以播放，最近的采集的视频不能播放。

1. 首先视频播放不了第一时间想到的就是路径不对，通过打断点和conse.log()查看日志，查看下是不是路径拼错了，仔细检查后发现并不是路径错误。
2. 其次，在网上找了在线MP4视频，查看是不是Videojs的问题。测试路径可以使用下面测试：
   https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mp4
   视频预览
   视频可以正产播放，并不是Video.js的问题
3. 最后，考虑到视频格式的问题，因为Video.js 支持的视频格式：MP4（包括 mp4 和 m4a 文件）、WebM（包括 webm 和 vtt 文件）、OGG（包括 ogg 和 theora 文件）、FLV、RTMP。需要注意的是，尽管某些 MP4 文件可能具有 MPEG-4或 H.264（AVC）编码，但 Video.js 只支持带有 H.264（AVC）编码的 MP4 文件。如在 Video.js 中播放其他编码的视频，可能需要转换为H.264 （AVC）编码或者确保在录制时设置正确的编码。发现之前前后的MP4视频编码不一致，确定是视频编码问题。

---

四、解决方案：

通过PotPlayer查看可以正常播放的视频和不能播放视频的视频格式，果真是 H.264 （AVC）格式。
解决办法为视频采集端把MPEG-4编码格式转换成 H.264 （AVC）编码格式就可以使用Video.js正常播放MP4视频了。
Video.js 正常播放MP4视频格式：

Video.js 播放不了MP4视频格式：