解决web服务器的mp4视频无法在浏览器端边缓存边播放

这两天给web服务器加了一个视频播放的页面，通过点击主页视频按钮可以跳转到视频播放页面进行视频播放，但是视频却不是一开始就进行播放，通过F12开发人员工具查看视频的请求是等待视频完全传输完成后再进行播放，而不是像其他视频网站一样边播边放。


通过查阅资料发现，mp4格式是一个个Box，其中moov存储的是metadata信息，mdat存储具体音视频数据信息。如果无法解析出moov数据，是无法播放该mp4文件的。而一般情况下mdat会在moov的前面，用mediaParse来查看一个mp4视频的结构如下

这样就影响用户体验(首帧加载时长过长)。

针对这种情况，通用的做法是在服务端做处理。通过ffmpeg命令吧moov移动到mdat前面。

ffmpeg -i in.mp4 -movflags faststart out.mp4

然后视频结构变为如下

这样就可以实现浏览器端边缓存边播放了

当然也可以将mp4文件格式转换为ts m3u8，实现分片缓存，这样效果应该更好，回头研究一下。
后续尝试将视频转化代码插入到写的代码中。