xgplayer西瓜视频插件引用后因视频格式引起问题?

起因是我的医疗公众号项目为了应对新需求引入了西瓜视频插件,但后台配置视频文件后有的可以正常展示,有的却是黑屏。我这边的安卓和ios端app都嵌套了我写的h5页面。

初步调查:

个别课程在手机上看着确实不能播放,在电脑上播放是视频全程是黑色,格式看着是mp4,怎么其他视频可以这两个不可以我也搞不明白,就让后端帮忙查一查,发现是这几个视频大小50M多一些,其他课程视频短,接口返回的长时长视频链接打开黑屏,我在各个浏览器打开链接都是黑屏,接口返回的视频链接有好有坏,有的视频显示正常,有的黑屏,目前猜想是web端视频上传后转换的过程中出现问题,这个视频链接放到浏览器打开看也不正常。错误的视频只有声音没有画面,不正常,可能某些环境下解析失败,返回的正常视频在各个端都正常播放,正常返回的链接,在各个端都正常播放。

进一步调查:

后端把阿里云上传的视频下载下来可以正常播放,我开始调查是否是播放器的原因,4min长度视频,iosApp可以正常播放,在安卓端app查看黑屏,ios的公众号可以看,安卓的公众号看不了

调查进行中:

不能正常播放的视频链接在哪个浏览器都是黑屏,需要先解决视频链接问题才能往下判定是否是前端这块出了问题。安卓都是有的视频能正常播放,有的返回的视频无法正常播放,视频链接能正常播放的,在各个浏览器打开也都正常播放,无法正常播放的链接,在安卓环境下打开全部都是黑屏,我现在认为接口返回的视频格式有问题。

最终结果:

正常播放的视频链接后查看编码为h264。
黑屏的一个视频下载后查看编码为mpeg4

经查:浏览器对于MP4编码方式的如下:
浏览器对mp4的编码方式要求的非常严格
视频编码必须是 H.264
音频编码必须是: AAC

最终解决办法:

其实可以后端转码再上传,但我们这期技术实现来不及,就确认了一种人为转码的方式前期规避这种问题。

把不能正常播放的文件转一下格式,再上传到oss上,我使用MediaCoder软件一键转码再上传后正常播放,需要在web上传视频前进行手动转码,将上传视频的编码格式统一转换为h264

你可能感兴趣的:(bug解决,音视频,前端,vue.js,css3,html5)