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

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

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

怪我咯
怪我咯

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

reply all(5)
Ty80

After several hours of exploration, I found that this is a problem with WeChat’s built-in browser itself.

Q: I also have questions. I'm working on an HTML5 page, which uses the video tag to play a video, but this video is always displayed at the top level. No matter how I adjust the z-index attribute, it doesn't work. I hope to display some text or pictures on the video. However, this problem behaves normally on PC, Apple ios, or other browsers. The only problem is the QQ browser or WeChat built-in browser under the Android system. Please give me some guidance.
A: X5 core video playback uses a self-developed player. Considering user experience, we use a unified playback interface. If you have related questions, please contact Tencent Browsing Service Product Manager for further communication

Quoted from http://x5.tencent.com/guide?id=2009

The solution is to pause the video playback when scrolling starts

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

Show video after scrolling:

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"; // 重新展示视频
      });

Online demo

WeChat Browser does not use Android’s built-in browser, but its own X5 kernel. And this X5 has extremely poor support for various web standards.

Peter_Zhu

Yes, I finally removed or hide it when exiting the interface

洪涛

This is a bug in mobile Android browsers, and it also exists in UC. The video level is max

左手右手慢动作

Haha, I encountered this problem some time ago. My solution is to set video 0px directly after any operation

伊谢尔伦

Youku, iQiyi, etc. are in the whitelist of major rogue browsers. The video will not be hijacked. If it is hijacked, it will be sued until it goes bankrupt. We and other little people can only be hijacked and fooled a a

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!