美文网首页
微信webview 及第三方浏览器劫持视频问题

微信webview 及第三方浏览器劫持视频问题

作者: 米古月_f198 | 来源:发表于2020-05-14 14:14 被阅读0次

视频问题(安卓浏览器,app)

  • 安卓手机,大部分浏览器,强制劫持video标签;引起一系列问题;
  • 视频播放时及播放后处于置顶状态,导致提示窗等元素被遮挡;
  • 视频展示样式发生变化,设置圆角失效;
  • 视频的控件无法管理,出现下载,分享等按钮;
  • 视频暂停或播放结束时,甚至出现广告浮窗;
  • 视频尺寸与展示不一致时,object-fill:fill,cover 不起作用;
1 视频问题汇总图.png

由于是banner上配置的视频,因此页面上有多个视频,引发更多的问题;banner滚动的时候,视频控件很卡顿,跟随滚动滞后;banner滚动结束,视频控件仍处于错位状态;

然后,突然察觉到一个现象,点击banner上多个视频进行播放,结果发现几个视频的样式有点儿不一致;看上去有的视频处于第三方劫持的魔鬼置顶状态,有的视频处于温柔无害的初始样式。。。

继续自测发现,反复播放多个视频时,只有最后一个视频是处于置顶状态的,也就是被浏览器劫持的状态;前面操作过的数个暂停的视频都恢复了初始样式;

那么,解决方案是,创建一个视频,设置为不可见状态。每次当界面上的视频暂停的时候,手动强制播放一下那个不可见的视频,结果,强行置顶的样式就这么被强行恢复了。

主要解决了暂停视频后的几个问题,banner轮播卡顿,提示窗被遮挡,暂停时的广告浮窗,暂停后能恢复圆角;
前两个问题属于影响用户使用的bug了。因此,解决了这两个问题,也算基本修复了bug;至于播放中的展示样式仍然不可控。

视频尺寸必须与设计一致,不然没法解决尺寸不符出现的黑边问题;
以下,附上铁的证据;下方两图是appium观察到的页面元素状态,图一,视频尚未播放,可以看到整个页面只有一个webview;
图二 视频播放之后,页面上新出现了一个view,就是app特设的视频view。 弱小无助的h5页面,对此毫无还手之力。。。


01 视频尚未播放.png 02 视频播放中.png

链接:https://www.zhihu.com/question/55808563/answer/541867672
这个不是技术能搞定的,要靠法务,腾讯维护了一个白名单。

相关文章

网友评论

      本文标题:微信webview 及第三方浏览器劫持视频问题

      本文链接:https://www.haomeiwen.com/subject/ekftohtx.html