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

本文探讨了如何处理医疗公众号项目中视频插件播放问题,通过排查发现编码不兼容导致黑屏。解决办法是后端转码统一为H264编码,确保浏览器兼容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

初步调查:

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

进一步调查:

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

调查进行中:

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

最终结果:

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

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

最终解决办法:

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JianZhen✓

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值