迟早会遇见的web视频播放器之疯狂的进度条 ---微信开发

本篇文主要讲的是在微信浏览器IOS中视频播放器的问题,至于安卓为啥不讲呢

毕竟安卓系统开源,微信动动手脚还是挺容易的

安卓基本上使用X5内核的播放器 基本没多大问题,就是比较多小坑点

有兴趣的同学可以留言 我会开多一篇博。


这个video不陌生吧,w3c的例子,但是实际开发移动端都知道,很多对象属性

PC端基本完美实现,然而移动端的问题就出来了

在IOS 若写入controls >,基本都会用浏览器标准的播放器,也就是下面这种


博主在产品的要求下,没有像各大视频网站一样去自己写controls,用了原生浏览器,于是这个坑就埋下了。

这里真的强烈建议所以写视频项目的小伙伴们

不要用自带的播放器!!!!

不要用自带的播放器!!!!

不要用自带的播放器!!!!

重要的事说三遍。

那么会出现啥问题呢?其实大家都可以去试试,IOS小窗播放的video 你只要频繁的左右拉动进度条。

页面除了video就点不了,没错 就是除了video控件外 你页面所有的东西都无法点击


这也是我们的产品玩弄出来的 所谓的BUG




看了一下 市面上用到自带播放器的不算特别多。但是只要用到的。百分之100 都存在该问题

看到这里 也许你遇到过 也许你没用过自带播放器,如果没用过是最好的

但是如果你用到了 如何处理呢


addEventListener('seeked',fn);

监听seeked


不难理解 就是调戏进度条成功的时候就会监听成功,

监听后如何处理上述问题呢,每次拖动进度成功controls就隐藏1.5s

博主真的是试了无数方法后 唯一可行的方案。。 用户无感知

需要注意的就是 

seeked拖动指定位置的时候 会执行两次

一次是视频未播放 第二次视频已播放

所以需要先if判断该视频播放状态

下面贴一下代码,不过我是框架开发



双向绑定提供了便捷啊~

然后问题解决了。。不懂得欢迎评论

猜你喜欢

转载自blog.csdn.net/Sourcemyx/article/details/80980501