記錄--短視頻滑動播放在 H5 下的實現

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實現 app 的視頻滑動體驗。無聲勝有聲，一圖頂百辯，且看下圖：網址鏈接（需在微信或者手Q中瀏覽）從上圖可以看到，我們主要實現的功能也是本文要講解的有： ...

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實現 app 的視頻滑動體驗。
無聲勝有聲，一圖頂百辯，且看下圖：

網址鏈接（需在微信或者手Q中瀏覽）

從上圖可以看到，我們主要實現的功能也是本文要講解的有：

上滑查看新短視頻
下滑查看歷史短視頻
滑動距離大於一個距離才上翻，否則歸位
滑動有速率的概念，如果速率達到一定值，距離不夠，也會翻頁
自動播放的問題
如何保證當前視頻的播放流暢度

Let's do it ~~~~~~~~~~~~~~~~

本文文字說明可仔細看，很多採坑路上的總結。小程式下滑動視頻的採坑之路下篇跟上。

HTML + CSS 頁面結構

頁面佈局採用 ul 佈局，如下：

主要樣式：

.quan_vcd_list-item{
    width:100%;
    height:100vh;
    overflow:hidden;
    position:relative;
    -webkit-overflow-scrolling:touch;
}
.quan_vcd_list.trans{
    transition:transform .3s ease-out 0s,-webkit-transform .3s ease-out 0s;
}
video .video_hide{
    left:-100%;
}

每個item充滿屏幕即可，增加鬆手時候的動畫。

<video
  x5-video-can-play-with-audio="true"
  :class="feedData.hide?'video_hide':''"
  :src="feedData.playurl"
  preload="auto"
  type="video/mp4"
  width="100%"
  webkit-playsinline="true"
  playsinline="true"
  loop="loop"
></video>

video的html，其中兩個三個重要點：

video需要先要將video移出屏幕外來達到隱藏的目的，如果用display:none的話，用戶點擊可能會出現異常。
設置playsinline，讓視頻在當前頁面播放而不是全屏。
x5-video-can-play-with-audio=true，且先執行播放音再播放視頻。如果不設置這個值，那麼在微信h5頁面，會出現播放播放了視頻，音頻自動停止的場面。

ul 是一個外層列表，寬度 100%即可。每一個視頻項是一個充滿屏幕的節點。本文不做重點講述了，感興趣可以自行嘗試。

核心js代碼

監聽用戶手勢，動態設置ul的translateY，然後執行音頻和視頻的播放。so easy!

手勢滑動

手勢滑動播放視頻翻頁，主要有兩個條件：滑動距離和滑動加速度。

初始化 Touch 主要是重置參數，記錄最後的位移，存儲頁面的高度。綁定 touch 事件。

function Touch() {
  this.init();
}
Touch.fn = Touch.prototype;
Touch.fn.init = function(params) {
  this.lastY = this.translateY; //記錄當前位移
  this.startY = 0;
  this.moveY = 0;
  this.lock = 0; //如果在回調或上升階段不允許滑動.
  this.bodyHeight = window.innerHeight;
  this.resetLimitY();
  self.isIOS = /ip(?:hone|ad|od)/.test(navigator.userAgent.toLowerCase());
  ["touchstart", "touchmove", "touchend"].forEach(str => {
    document.addEventListener(this, this[str].bind(this));
  });
};

監聽手勢的滑動

這裡增加了一個 lock 變數，用於當滑動翻頁的時候，頁面處在翻頁中的狀態，需要鎖死滑動，否則會錯亂。
lastY 是上一次滑動完之後的最終狀態距離，translateY 是指滑動中的狀態距離，需要實時變更 ul 的 translateY 的值

檢測滑動的加速度：detectAcc

var a = Math.abs(this.moveY) / (Date.now() - this.start) >= 0.5;

滑動的距離大於滑動的時間差的一半，則認為是主動翻頁，需要執行翻頁操作。

這裡要註意點：ios 下再滑動過程中，可以立即執行翻頁，體驗很好，但是 android 不行,所以安卓需要等 touchend 之後再執行翻頁

Touch.fn.touchstart = function(e) {
  if (this.lock) return;
  this.startY = e.touches[0].pageY;
  this.start = Date.now(); //標識滑動起始時間，也用於標識滑動start
};
Touch.fn.move = function(y) {
  this.translateY = y;
};
Touch.fn.touchmove = function(e) {
  if (this.lock || !this.start) return; //鎖定了，或者沒有start，主要是手勢一直滑動情況，已經加速度划走了，手勢需要鬆開再重新開始
  this.moveY = e.touches[0].pageY - this.startY;
  this.move(this.moveY + this.lastY);
  this.detectAcc();
};
/**
 * 檢測加速度
 */
Touch.fn.detectAcc = function(isEnd) {
  // console.log(self.moveY+"  "+(Date.now()-self.start));
  var a = Math.abs(this.moveY) / (Date.now() - this.start) >= 0.5;
  if (isEnd) {
    if (a) {
      this.limitY = 0;
    }
    this.movend();
    return;
  }
  if (this.isIOS && a) {
    //IOS，可以在touchmove時直接滑動，體驗流暢。
    this.limitY = 0;
    this.movend();
  }
};

處理翻頁操作

設定翻頁需要滑動的最小距離，這裡需要大於 1/3 個屏幕高度。
如果用戶滑動的距離大於最小滑動距離，則翻頁，否則執行歸位。不管歸位還是滑動翻頁，都有一個 transition 的過程，這個過程我們不接受手勢，所以需要等到位移結束之後，才重置 Lock 標識。
這裡還用到了動態拉取下下一個視頻（我這裡一次拉取兩個視頻），所以需要發出 eventsBus 事件，讓接受該事件拉取新的視頻。

Touch.fn.resetLimitY = function () {
    this.limitY = this.bodyHeight/3;//位移多少才下滑
}
Touch.fn.touchend = function (e) {
    if(this.lock||this.moveY==0||!this.start) return;
    this.detectAcc(1);
}
Touch.fn.movend = function () {
    const self = this;
    this.lock = 1;
    /***
    * 最後上下位移小於最小值則還原為上一次位移，
    * 否則，那麼就需要上移或下移一個body寬度，上移則translate加，下移在減去一個body
    * 這裡是計算出了應該位移高度。
    */
    let transformY = Math.abs(self.moveY)<self.limitY?self.lastY:self.lastY+self.bodyHeight*(self.moveY>0?1:-1);

    /***
    * 還需計算最大下滑高度和最大上滑高度
    */
    let listUL = document.querySelector(".quan_vcd_list");
    let listHeight = listUL.getBoundingClientRect().height;

    //如果是最後一個li，則不能下滑，
    let maxBottom = (listHeight - self.bodyHeight)*-1;
    let lastComputeY = transformY>0?0:transformY<maxBottom?maxBottom:transformY;
    //停止滑動之後，自動滾動距離，transition
    listUL.classList.add('trans');
    if(lastComputeY<=0){
        let d = lastComputeY-self.lastY;
        d&&events.trigger("touch_move",d,(-lastComputeY/self.bodyHeight));
    }
    self.start = 0;
    (window.requestAnimationFrame|| window.webkitRequestAnimationFrame)(function () {
        self.move(lastComputeY);
        self.moveY = 0;
        self.lastY = lastComputeY;//記錄確定的位置
        if(listHeight + self.lastY<=self.bodyHeight){
            events.trigger("turnPage");
        }
        setTimeout(function () {
            listUL.classList.remove("trans");
            self.lock = 0;
            self.resetLimitY();
        },500);
    });

註冊視頻組件

視頻和背景音兩種控制，如果視頻執行 stalled 和 waiting 連續多次就代表視頻卡住了，需要 show 出載入中的 loading 框。
重點方法：onx5videoexitfullscreen 這個是 x5 瀏覽器在點擊了全屏之後，再返回頁面的時候，預設是視頻 pause 的，所以需要 play

export default function videoComponent(opt) {
  var config = {
    props: ["feedData", "index"],
    data: function() {
      return {
        play_btn: 0,
        bg_name: "",
        anim_like: [],
        vloading: 0
      };
    },
    mounted:function(){
        this.addEvent();
        this.stall = 0;
        this.loaderror = 0;
    },
    methods: {
      onstalled: function() {
        if (!this.feedData.start) return;
        this.vloading = 1;
        this.play();
        this.stall++;
        if (this.stall == 2) {
          showTip("網路有點慢哦~");
          store.report(27, 1);
        }
      },
      waiting: function() {
        clearInterval(this.timer);
        this.loadTimes = 0;
        this.timer = setInterval(() => {
          this.loadTimes++;
          if (this.loadTimes >= 2) {
            //連續3次未播放，當作是卡住了
            this.aPause();
            this.vloading = 1;
          }
        }, 1800);
      },
      ondurationchange: function() {
        this.compute();
      },
      onloadedmetadata: function() {
        this.compute();
      },
      ontimeupdate: function() {
        this.timeupdate();
      },
      aPause: function() {
        this.audio && this.audio.pause();
      },
      aPlay: function() {
        this.audio && this.audio.play();
      },
      pause: function() {
        this.video.pause();
        this.aPause();
        this.vloading = 0;
        clearInterval(this.timer);
      },
      play: function(isMove) {
        this.videoPlay(isMove);
      },
      checkLoading: function() {
        checkLoading(this);
      },
      onx5videoexitfullscreen: function() {
        this.video.play();
      }
    }
  };
  Vue.component("video-com", util.assign(config, opt));
}

註冊事件

註冊video的事件，處理背景音樂，監聽上面手勢滑動的翻頁事件。

如果是微信環境，需要等待wx的api載入完成。在android微信裡面是無法自動播放視頻，否則可以自動播放視頻。

function addEvent() {
    this.$nextTick( ()=> {
        this.video = this.$el.querySelector("video");
        var arry = ['stalled','playing', 'timeupdate', 'abort', 'error','durationchange','loadedmetadata','pause','x5videoexitfullscreen'];
        arry.forEach( (str)=> {
            this.video.addEventListener(str,this['on'+str]);
        });
        if(this.index==0){
            this.loadWX(function (isWx) {
                if(isWx&&isAndroid) return;
                this.play();
            });
        }
    });
    this.handleBGM(this.feedData);
    let self = this;
    events.listen("touch_move", (direct,i)=> {
        handleMove(self,direct,i);
    });
}
function loadWX(cb) {
    if(device.scene=="weixin"){
        if(window.WeixinJSBridge){
            cb(true);
        }else{
            document.addEventListener("WeixinJSBridgeReady", function() {
                cb(true);
            });
        }
    }else{
        cb();
    }
}

預載入

預載入的前提是當前視頻已經載入完成了，才能預載入下一個視頻。需要標識每一個視頻是否載入完成。

如果當前視頻沒有載入完成，將會把預載入的視頻都幹掉，防止占用當前網路
如果當前視頻已經載入完成，則一直預載入下一個，下下一個，對於網路好的尤為明顯。

function checkLoading() {
    let self = this;
    var interval = window.setInterval(getLoaded,100);
    // 獲取視頻已經下載的時長
    function getLoaded() {
        var end = 0;
        try {
            end = parseInt(self.video.buffered.end(0) || 0)+2;
        } catch(e) {
        }
        if(end>=self.duration){
            clearInterval(interval);
            self.loadedAll = 1;
            var nextItem = store.store.feedList[self.index+1];
            if(nextItem){//存在下一條
                //沒有播放視頻，既還沒有載入完成。
                if(!nextItem.playurl) nextItem.playurl = nextItem.videourl;
                //有背景音樂，但是播放的背景音樂未載入完成，則開始載入
                if(!nextItem.bgmurl_p&&nextItem.bgmurl){
                    nextItem.bgmurl_p = nextItem.bgmurl;
                }
            }
        }
        return end
    }
}

滑動視頻處理

滑動播放是關鍵，需要保證用戶手勢和執行播放需要是同步的，否則會出現部分手機播放失效，需要多點擊一下播放。

如果是當前視頻，則需要播放當前視頻和音頻
需要停止還沒有下載完的視頻和音頻（停止的做法就是將視頻的url置空即可），否則影響當前播放的順暢度。對於已經下載完的了則不需要處理。
同一個頁面最大存在16個視頻(ios的限制)，已當前視頻為中心，上下保留七個視頻，其餘視頻全部display:none

function handleMove(self, direct, i) {
  if (i == self.index) {
    handleCurrent(self);
  }
  //direct>0 則是下滑,頁面出現上一個視頻，則當前位置的下一個視頻要暫停，
  //direct<0則是上滑，頁面要播放下一個視頻了，則當前位置的上一個視頻要暫停
  if (self.index == i + (direct > 0 ? 1 : -1)) {
    self.pause();
    if (!self.loadedAll) {
      feed.playurl = ""; //如果是未載入完成，那麼就不要載入了。
      feed.start = 0;
      feed.hide = 1;
    }
    if (!self.audioLoaded) {
      feed.bgmurl_p = "";
    }
  }
  if (self.index >= i + 7 || self.index <= i - 7) {
    feed.maxHide = 1; //最大超過16個節點，則隱藏。
    feed.playurl = ""; //最大超過16個節點，則把其他視頻幹掉。
    feed.start = 0;
    feed.hide = 1;
  } else {
    feed.maxHide = 0;
  }
}
function handleCurrent(self){
    if (!self.feed.playurl) {
      self.feed.playurl = self.feed.videourl;
      if (!self.feed.bgmurl_p && self.feed.bgmurl) {
        self.feed.bgmurl_p = self.feed.bgmurl;
        self.audio.load();
      }
      self.video.load();
    }
    self.$nextTick(()=> {
      store.addPlayNum(feed.shareid);
      if (self.audio && !self.audioLoaded) {
        var int = setInterval(()=> {
          if (self.audioLoaded) {
            clearInterval(int);
            self.play(1);
          }
        }, 100);
      } else {
        self.play(1);
      }
    });
}

播放的Error

播放在不同的手機上可能會進入error（abort,error,stall）,我們需要自動再出發一次播放，這個能解決一部分手機二次播放的問題，會無緣無故進入error,導致視頻無法播放。

function errors(msg) {
    let self = this;
    if(!self.video||!self.feedData.start) return;
    self.loaderror++;
    if(self.loaderror<=2){
        self.play();
        return;
    }
    setPlay(1);
    // report msg 
}

記錄--短視頻滑動播放在 H5 下的實現

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實現 app 的視頻滑動體驗。
無聲勝有聲，一圖頂百辯，且看下圖：

網址鏈接（需在微信或者手Q中瀏覽）

從上圖可以看到，我們主要實現的功能也是本文要講解的有：

Let's do it ~~~~~~~~~~~~~~~~

HTML + CSS 頁面結構

核心js代碼

手勢滑動

註冊視頻組件

註冊事件

預載入

滑動視頻處理

播放的Error

本文轉載於：

https://juejin.cn/post/6844903957920219149

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

記錄--短視頻滑動播放在 H5 下的實現

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實現 app 的視頻滑動體驗。 無聲勝有聲，一圖頂百辯，且看下圖：

網址鏈接（需在微信或者手Q中瀏覽）

從上圖可以看到，我們主要實現的功能也是本文要講解的有：

Let's do it ~~~~~~~~~~~~~~~~

HTML + CSS 頁面結構

核心js代碼

手勢滑動

註冊視頻組件

註冊事件

預載入

滑動視頻處理

播放的Error

本文轉載於：

https://juejin.cn/post/6844903957920219149

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實現 app 的視頻滑動體驗。
無聲勝有聲，一圖頂百辯，且看下圖：