视频问题(安卓浏览器，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