html5 - 安卓微信内置浏览器video的坑
怪我咯
怪我咯 2017-04-17 12:05:01
0
5
444

安卓微信内置浏览器下播放video标签的视频,这个video总是悬浮在最顶层,像被fixed定位了一样,全屏退出后也是这样。
请问有人遇过这样的问题吗?该怎么解决?

更新:该页面使用了iscrolljs,经测试是由于引入iscroll导致的,原生的滚动并不会出现这个问题。
demo: https://jsfiddle.net/Hchun/1wjj1g57/

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(5)
Ty80

几个小时的探索,发现这是微信内置浏览器自身的问题。

Q:我也有问题想问。我在做一个HTML5页面,其中使用video标签播放视频,但是这个video是总是表现在最顶层,无论怎样调节z-index属性都不起作用,我希望可以在视频上展示一些文字或图片。然而这个问题在PC端和苹果ios,或其他浏览器表现正常,唯独是在android系统下的QQ浏览器或微信内置浏览器表现有问题,求大神指导一下。
A: X5内核视频播放使用了自研的播放器,考虑用户体验,我们使用了统一的播放界面。如果有相关问题,请联系腾讯浏览服务产品经理做进一步交流

引用自 http://x5.tencent.com/guide?id=2009

解决办法是在滚动开始时暂停视频播放

var video = document.getElementsByTagName("video")[0];
      myScroll.on('scrollStart', function() {
        video.pause(); //暂停播放
        video.style.display = "none"; //隐藏
      });

滚动结束后显示视频:

myScroll.on('scrollEnd', function() {
        if(this.y > -_wh/2 && this.y < 0) {
            myScroll.scrollTo(0,0,500);
          }
          if(this.y > -_wh && this.y < -_wh/2) {
            myScroll.scrollTo(0,-_wh,500);
          }
            video.style.display = "block"; // 重新展示视频
      });

在线demo

微信浏览器使用的不是安卓内置的浏览器,而是自己的 X5 内核。而这个 X5 对各项 Web 标准支持极差。

Peter_Zhu

有,我最后是在退出界面的时候把它remove或者hide掉

洪涛

这是手机安卓浏览器上一个bug,uc也有,video的层级是max的

左手右手慢动作

哈哈,前段时间就遇到这个问题,我的解决办法是任何操作后直接设置video 0px

伊谢尔伦

优酷爱奇艺等在各大流氓浏览器的白名单里面,video 不会被劫持,要是被劫持,告到他倒闭,我等小屁民只能被劫持忽悠 a a

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!