背景
在自己研发的手机APP上(Android tbs x5webview/iOS wkwebview)打开H5页面,页面上使用了video播放视频,当进入其它页面或返回上级页面,又或者暂停播放的时候,视频的缓冲并未停止,还在持续下载。
初级解决方案
我们在页面退出的时候,把video节点的src属性设置为"",或者根据[MDN官方文档](!https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery) `Stopping the download of media`这一小节的描述,使用removeAttribute移除src属性。
此时在电脑的浏览器devtool里面inspect手机上的页面,看network栏,确实是停止下载视频数据了,万事大吉!
然后悲剧发生了,某人测试突然发现访问了几个页面之后,数据流量消耗了5.4G,于是问题爆发了。
使用抓包工具,发现确实无论在Android还是在iOS上,视频缓冲的下载都没有停止。
爬坑
然后开始了爬坑之旅,折腾了近两天,被残酷的现实打败了,只能使用最初想到的一个弱弱的方案解决问题,这里记录一下以共勉
iOS
在H5层面折腾了很久,排除了各种vue组件的影响之后,仍然没有解决问题,只能回归到native去找原因。用纯净的wkwebview发现没有这种问题,然后逐步定位发现是拦截器造成的。
对于http服务器上的视频资源(mp4,m3u8等)
只要使用了
[NSURLProtocol wk_registerScheme:@"http"];
无论你
(BOOL)canInitWithRequest:(NSURLRequest *)request
中返回的是YES还是NO,缓冲视频的下载都不会终止,会一直持续到下载完整个视频。

本文主要探讨了在Android TBS X5 WebView和iOS WKWebView中,视频缓冲未停止的问题。即使通过清除video src或移除属性,视频仍会持续下载。在iOS中,问题源定位为NSURLProtocol的注册,而在Android的X5 Webview中,视频始终完全缓存。最终,作者采用了一个临时解决方案,即在离开页面时将video播放位置设为视频总时长,以暂停缓冲。
最低0.47元/天 解锁文章
2万+

被折叠的 条评论
为什么被折叠?



