记一次HTML5视频直播爬坑之旅

作者:萌萌哒霜刃
链接:https://zhuanlan.zhihu.com/p/25448742
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

人物介绍:产品同学:亮亮

测试老大:春春

运维同学:原原

运营妹子:乐乐

前端:我

某日亮亮:“嗨!我们做个html5的直播吧!运营做活动用!”

脑海里翻腾过无数种兼容处理解决方案以及功能上各种实现方式后,

我:“好呀!”

需求不算复杂:

报名参加一场线下活动,可在微信看直播,如果是直播时间之前打开观看则是播放一则固定的片花

(省略各种需求评审,接口评审,交互评审...)

数日后

春春:“测试环境测试通过,各项功能正常,视频播放正常!可发布生产!”
原原拿到春春的确认邮件,以迅雷不及掩耳之势,排山倒海般的一顿敲击:“发布完成了!”

半分钟后

不知谁大叫一声:“我草片花怎么这么卡!”

亮亮一脸懵逼的看着我,

春春一脸懵逼的看着我,

乐乐一脸懵逼的看着我,

我一脸懵逼的看着代码...

“应该是生产服务器集团IT那里限制了视频流的带宽” 原原淡定的巡视着服务器一边说道

乐乐:“我们把视频放到优酷吧,反正就直播开始前用下,直播时都切到直播源了”

好的,说干就干!

晚上

春春:“测试环境测试通过,各项功能正常,视频播放正常!可发布生产!”

原原拿到春春的确认邮件,以迅雷不及掩耳之势,排山倒海般的一顿敲击:“发布完成了!”

半分钟后

不知谁在此大喊一声:“我草,怎么页面直接挂了!”

亮亮一脸懵逼的看着我,

春春一脸懵逼的看着我,

乐乐一脸懵逼的看着我,

我一脸懵逼的看着代码...

Debug一通后,发现优酷默认的是http 的地址,刚好我们生产是https。so 浏览器安全机制拦截了

幸好优酷https地址也能跑,于是又嗖嗖嗖如飞流直下三千尺般瞬间处理好了这个紧急问题(其其实就是在http后面加了个s)

第三次提测

春春:“测试环境测试通过,各项功能正常,视频播放正常!可发布生产!”

原原拿到春春的确认邮件,以迅雷不及掩耳之势,排山倒海般的一顿敲击:“发布完成了!”

嗯!这次没有不知谁大喊一声了

"咦?"

亮亮疑惑道:

"我们在自己APP内嵌了这个页面,但是安卓app播放不了这个视频啊!"

亮亮一脸懵逼的看着我,

春春一脸懵逼的看着我,

乐乐一脸懵逼的看着我,

我一脸懵逼的看着代码...

经验证:微信,iosAPP,PC,safari,都没问题,唯独AndroidAPP内嵌有问题

来不及找原因了,先换一个方案代替(事后,大概猜测是AndroidAPP的webView未开启localStroage导致的)

于是我们联系上了本次直播供应商,寻求将片花mp4放在他们服务器。并提供地址

合作很愉快的确定了,我们没也很愉快的拿到地址,改代码,提交给测试

深夜

春春:“安卓APP中打不开片花,按钮直接X掉了!”

紧急找原因:

安卓部分机型,webView中 video标签播放m3u8的话,调不起来自带的视频播放组件

解决方案很简单,APP端检测到webView 的视频播放,手动帮忙开启自带视频播放组件

但是APP改动需要发版,需要提交审核。

so,

“我们将APP内视频播放去掉,放一张图片代替,让他们分享到微信后观看!”亮亮给出解决方案

于是我们又修改代码,提交测试。

第二天

春春:“测试环境测试通过,各项功能正常,视频播放正常!可发布生产!”

原原拿到春春的确认邮件,以迅雷不及掩耳之势,排山倒海般的一顿敲击:“发布完成了!”

亮亮:“这次验证没问题了”

亮亮松了一口气,

春春松了一口气,

乐乐松了一口气,

我松了一口气

静待周日正式直播

然而,事情总是没有想象的那么美好!

直播当天

我:“IOS测试直播流没问题”

亮亮哭丧着脸在群里说:“安卓直播流一直加载0%,能否查下原因?”

亮亮一脸懵逼的看着我,

春春一脸懵逼的看着我,

乐乐一脸懵逼的看着我,

我一脸懵逼的看着代码 哦不,看着群里。。。。

于是我以迅雷不及掩耳之势奔回公司

Debug,不断的查原因...

原来,

直播供应商的直播流,虽然支持https,但是是个假证书,被微信拦截了!

。。。

所以这个需求总计发版5次,修改5*N次,最后的最后还是在直播的时间并没有完美的运行下去(安卓机型的客户没能观看直播)

以上就是一次直播需求的踩坑经历

总结如下:

1.安卓对m3u8的支持不是很好,特别是普通的webView中

2.使用第三方的代码或者html标签,请确保webView兼容性,比如说该开的功能是否全开

3.和直播供应商沟通,并确保包括https的支持是否100%完善

4.打死你都不要做直播需求!打死你都不要做直播需求!打死你都不要做直播需求! 重要的事情说三遍!

HTML5前端

THE END
分享
二维码
打赏
< <上一篇
下一篇>>