解決單頁面應用微信瀏覽器后臺加載視頻

TwIStOy 發布于2019-08-22 11:20 / 1596人閱讀

摘要：問題單頁面應用，用戶使用打開過一個視頻后，即使銷毀了，甚至播放頁面都關閉的情況下，微信瀏覽器仍然會在后臺繼續加載視頻，這會浪費很多流量。

問題

單頁面應用，用戶使用wifi打開過一個視頻后，即使銷毀了video，甚至播放頁面都關閉的情況下，微信瀏覽器仍然會在后臺繼續加載視頻，這會浪費很多流量。
最開始以為使用銷毀vidoe標簽后，視頻即會停止加載，事實上在大部分瀏覽器上確實如此，但是微信內置瀏覽器在這方面表現不一致。
在使用流量的情況下，退出播放頁面后視頻確實停止加載了，但是在wifi下，視頻會在后臺繼續下載，除非退出當前單頁面應用。

解決問題

1、最開始在組件 destroy 的 hook 時，dispose videojs 實例，無效，視頻繼續后臺下載。

2、后來想讓videojs 加載一個空的視頻資源地址欺騙微信瀏覽器，videojs.src("")，無效，視頻還是會繼續加載。

3、空的字符串不生效，加載一個無效的視頻資源地址，再銷毀videojs實例，成功解決視頻后臺下載的問題。

主要代碼如下:

destroyed() {
      // 組件銷毀時,用一個假的播放視頻地址,欺騙微信瀏覽器,使其加載其他的視頻,不繼續加載我們的視頻同時銷毀videojs
      this.player.src({
        src: "http://124.160.184.108/live/5/45/3bfabc1fe16a4282b50ea095928c1f60.m3u8",
        type: "application/x-mpegURL",
        withCredentials: false
      })
      setTimeout(()=>{
        this.player.dispose()
      },1500)
    }

GPU云服務器云服務器單頁面應用展示廳音視頻系統建設和應用綜合解決方案單頁面工單管理頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92219.html

前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

pumpkin9 2019-08-23 17:12 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

Carson 2019-07-31 10:21 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

muzhuyu 2019-07-01 12:43 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

li21 2019-08-23 17:11 評論0 收藏0