开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

第一次参加掘金日新计划，对于不常写文的我来说，一时还真不知道写什么。那就写一下我曾经解决过的令人抓狂的问题吧，首先想到的就是微信小程序视频组件的开发。

需求

运行环境是微信小程序，支持android和ios，可以进行视频播放，包含倍速播放功能和继续上次播放功能。

过程

项目使用的是uni-app，那首选的就是uni-app的video组件，api用uni.createVideoContext的seek和playbackRate正好可以满足需求。美中不足的是倍速播放放到了播放条之外，否则就得手写播放条，为了避免麻烦，我说服了产品经理，虽然美观度差了点，但第一版可以接受，产品经理妥协了，同意先上线，看客户反馈再改。到此，皆大欢喜，到了测试处......

问题

测试反馈“使用倍速播放时，视频播放一直转圈圈，进度条也不动，拖动进度条后很快回到原来位置继续卡”，这个问题在ios中特别明显，在Android中很难发现，安卓手机的我就没发现......

解决

问题挺清楚的，就出在playbackRate上，试着对playbackRate进行各种调试，还是不行。不用playbackRate那就不能实现倍速播放了，可以和产品商量一下把倍速也砍了吗，显然不行。问题还得解决。既然用uni-app的video组件开发不行，那就用原生呗。

实现步骤

1. 进行微信小程序视频播放器原生开发。
2. 手写播放条，含时间、进度条、播放按钮、倍速、全屏。（既然重写video组件了，索性一次性解决）
3. 进行视频播放器组件之间的通信开发。
4. 将视频播放器组件以组件形式加入项目。

还有问题

原生开发也不是一帆风顺的，还是有一些小磕小绊：

• ios视频播放时间显示异常

• • 原因是video组件里bindtimeupdate在ios和Android中是有区别的。
• • ios：播放后bindtimeupdate可以监听到，不播放监听不到
• • Android：播放后bindtimeupdate可以监听到，播放前或播放结束后能监听到一次
• • 所以，setData数据时，如果bindloadedmetadata、bindended、bindtimeupdate需要setData同一数据，在ios里都需要setData，在Android里只需在bindtimeupdate里setData就可以了

• 视频在生产环境无法播放

• • 原因是referer防盗链微信小程序不支持。
• • 最终改成referer可为空，增加key防盗链。
    

至此，问题算都解决了，可以上线了^-^