在微信端使用video標簽,播放結束會出現QQ瀏覽器推薦視頻的解決辦法(vue)


會出現播放結束顯示QQ瀏覽器推薦視頻的原因:(我是vue的項目,而且我是新手,只是單純的給大家分享一個方法,代碼比較low請自動忽略)

  因為在x5(QQ瀏覽器)內核中,把video標簽劫持了,只要是檢測到使用了video標簽的話(包括使用了基於h5的video寫的插件),就會出現這種情況。

 

解決辦法:

  html部分:(需要的是一個id選擇器,其他的請忽略,src中的內容是調接口返回)

    <video autoplay id="end" controls :src="chapter.url" poster="http://eres.xgstars.com/promote/ed.png"></video>

  js部分:

    showOtherVideo(){
      let _this = this;
      setTimeout(function(){
        var dom = document.getElementById('end');
        var flag = dom.paused;
        if(!flag){
          _this.showOtherVideo();
        }else{
          // _this.showOtherVideo();
          if(dom.currentTime == dom.duration && dom.currentTime!=0){ 
            //這里的判斷是如果視頻的總時間等於視頻已經播放的時間,並且視頻的播放時間不為零時
            //這個地方的就是寫視頻結束的時候的代碼的地方
          }else{
            _this.showOtherVideo();
          }
        }
      },1000)
    },
 
  這個的原理就是通過一個計時器每隔一秒刷新一次,來監聽視頻是不是播放完畢,如果沒有播放完畢則繼續監聽,如果播放完畢就執行下面的方法,可以調用你自己公司的接口來請求下一段視頻,替換當前視頻,他會有一秒的閃爍,然后就會跳走,如果先看看效果的話,就去微信瀏覽器里面看看優酷,他們就是這種效果,但是方法應該不會這么low。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM