首页 > 技术文章 > ios设备中,无法播放后台返回视频文件

mamifeng 2020-10-28 17:02 原文

1. 最近开发的一个项目,有涉及到录音录像的问题;android的坑没有这么多,最主要是ios设备的问题,ios设备太过于封闭,以至于出现问题只能alert,不断打包的去定位问题;

想来,我的头发能保住也是一种运气了;

问题情境:

前端录制视频上传之后,上传给后台,后台返回存放路径;

在这样的情况下,android设备以及pc端都没有问题,播放也是相当的正常;但是问题就来了,ios设备出现播放按钮并且加斜杠;内心崩腾中。。。。

奈何网上资料不多,而且前端无法解决;但是,youy但在这里也是附上链接,甩锅后台好了:

链接:https://blog.csdn.net/qq_35221138/article/details/86524111

------------------------------------------------------------------------------------------------------------------

对以上解决办法来个后续;其实以上解决办法是可行的;

对于我提出的后台返回base64文件这个解决方案,会有很多因素影响,例如网络环境差,会造成数据请求超时,或者是数据加载半天,会有很不好的体验感;所以,我们后续还是决定采用上述提出的办法解决ios出现的问题;

这个时候,就会出现一个问题就是android端录制的视频无法在ios端播放,这个问题,我们一直很困惑;后面才发现安卓我采用js的原生api MediaRecorder这个api录制的视频是webm格式的,编码为vp8;这类格式的视频,在ios端是不支持的,但是,mediaRecorder中有个属性mimeType可以设置录制的视频格式以及编码,我就想我改一下,but有个大坑,对于chorme浏览器以及webview中只支持webm格式的录制,附上代码截图:

 

 我就在想前端能不能解决这个问题呢?当然可以,后面前端就采用了cordova-plugin-media-capture这个插件去调用手机里的原生插件去录制视频;关于cordova-plugin-media-capture的使用以及出现的问题下一篇博客中提及;

OK,问题解决,这个时候前端只用接收后台返回来的视频流即可;

附上代码截图:

 

 

 

--------------------------------------------------------------------------------------------------------------------

由于我们的视频文件存放的是第三方系统,直接根据第三方系统的路径取数据的,所以,甩锅后台也没有用;but,我们自己有备份啊!!!

具体处理逻辑就交给我们后台的大佬去了;

我的解决办法以及需要后台提供的数据就是:

1.当我点击播放时,会获取相应的文件基本信息,请求后台的接口,后台根据信息返回base64的视频文件给我

2.我把base64转为blob二进制文件,其中,切勿忘记加type;否则也是无法播放的

3.最后转化为可以播放的url就可以了;

 

推荐阅读