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

安卓微信内置浏览器下播放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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板