最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

滚动：记录--短视频滑动播放在 H5 下的实现

来源：博客园

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

短视频已经无数不在了，但是主体还是使用 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的html，其中两个三个重要点：

  • video需要先要将video移出屏幕外来达到隐藏的目的，如果用display:none的话，用户点击可能会出现异常。
  • 设置playsinline，让视频在当前页面播放而不是全屏。
  • x5-video-can-play-with-audio=true，且先执行播放音再播放视频。如果不设置这个值，那么在微信h5页面，会出现播放播放了视频，音频自动停止的场面。

ul 是一个外层列表，宽度 100%即可。每一个视频项是一个充满屏幕的节点。本文不做重点讲述了，感兴趣可以自行尝试。

核心js代码

监听用户手势，动态设置ul的translateY，然后执行音频和视频的播放。so easy!

手势滑动

手势滑动播放视频翻页，主要有两个条件：滑动距离和滑动加速度。

  1. 初始化 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));  });};
  1. 监听手势的滑动

这里增加了一个 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. 处理翻页操作

设定翻页需要滑动的最小距离，这里需要大于 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)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
注册视频组件
视频和背景音两种控制，如果视频执行 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 }
本文转载于：
https://juejin.cn/post/6844903957920219149
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
                 

关键词：         
       背景音乐 
              
       自动播放 
              
       当前位置