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

短视频已经无数不在了,但是主体还是使用 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!

手势滑动

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

  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)<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
}

本文转载于:

https://juejin.cn/post/6844903957920219149

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--短视频滑动播放在 H5 下的实现的更多相关文章

  1. 揭秘盒马鲜生 Android 短视频秒播优化方案

    短视频作为内容重要的承载方式,是吸引用户的重点,短视频的内容与体验直接关系到用户是否愿意长时停留.因此,体验的优化就显得尤为重要.上一篇我们分享了 iOS 短视频秒播优化,这篇我们来聊聊 Androi ...

  2. Android短视频滑动播放(一)

    本文主要介绍采用RecyclerView配合PagerSnapHelper实现短视频滑动播放内容. 1. 主页内容构建 主页布局文件定义RecyclerView,为RecyclerView建立对应适配 ...

  3. HTML5视频播放在ios下浮动元素无法点击的解决方案

    最近许多人在微博上问到在iPad.iPhone.iTouch等设备上使用HTML5播放视频,在视频上方悬浮一个div元素,div内的元素无法点击的情况,而在PC浏览器上没有这个问题. 这个现象是设备特 ...

  4. 如何实现 Android 短视频跨页面的流畅续播?

    在一切皆可视频化的今天,短视频内容作为移动端产品新的促活点,受到了越来越多的重视与投入,同时短视频也是增加用户粘性.增加用户停留时长的一把利器.那么如何快速实现移动端短视频功能呢?前两篇我们介绍了盒马 ...

  5. 短视频服务大PK,阿里云、腾讯云、又拍云、七牛云、金山云5强横向对比

    继直播后,短视频又再次爆发,在这个风口,国内的各大云厂商也都相继推出了自己的一站式短视频解决方案.上周由于公司短视频功能开发的需要,对比了阿里云.腾讯云.又拍云.七牛云.金山云5家的短视频服务. 先介 ...

  6. 如何实现 iOS 短视频跨页面的无痕续播?

    在一切皆可视频化的今天,短视频内容作为移动端产品新的促活点,受到了越来越多的重视与投入.盒马在秒播.卡顿率.播放成功率等基础优化之外,在用户使用体验上引入了无痕续播能力,提升用户观看视频内容的延续性. ...

  7. uni-app仿抖音APP短视频+直播+聊天实例|uniapp全屏滑动小视频+直播

    基于uniapp+uView-ui跨端H5+小程序+APP短视频|直播项目uni-ttLive. uni-ttLive一款全新基于uni-app技术开发的仿制抖音/快手短视频直播项目.支持全屏丝滑般上 ...

  8. 如何下载网易云音乐APP里的MV和短视频?

    本人:网易云音乐死粉,朋友圈大多都用的是云音乐,因为推荐功能牛逼 然后:发现云音乐APP里越来越多吸引我的短视频,经常看到好的就想保存到相册,然后微信发给朋友 但是:不知道怎么下载网易云音乐的短视频, ...

  9. Python爬虫---爬取抖音短视频

    目录 前言 抖音爬虫制作 选定网页 分析网页 提取id构造网址 拼接数据包链接 获取视频地址 下载视频 全部代码 实现结果 待解决的问题 前言 最近一直想要写一个抖音爬虫来批量下载抖音的短视频,但是经 ...

  10. 从350ms到80ms,揭秘阿里工程师 iOS 短视频优化方案

    内容作为 App 产品新的促活点,受到了越来越多的重视与投入,短视频则是增加用户粘性.增加用户停留时长的一把利器.短视频的内容与体验直接关系到用户是否愿意长时停留,盒马也提出全链路内容视频化的规划,以 ...

随机推荐

  1. 【Unity3D】Bloom特效

    1 Bloom 特效原理 ​ Bloom 特效是指:将画面中较亮的区域向外扩散,造成一种朦脓的效果.实现 Bloom 特效,一般要经过 3 个阶段处理:亮区域检测.高斯模糊.Bloom 合成. ​ 本 ...

  2. 基于keras的双层LSTM网络和双向LSTM网络

    1 前言 基于keras的双层LSTM网络和双向LSTM网络中,都会用到 LSTM层,主要参数如下: LSTM(units,input_shape,return_sequences=False) un ...

  3. React中的纯组件

    React中的纯组件 React提供了一种基于浅比较模式来确定是否应该重新渲染组件的类React.PureComponent,通常只需要继承React.PureComponent就可以定义一个纯组件. ...

  4. 超简单JSP人员信息管理系统(适合新手练手用)

    自己以前闲着没事写的JSP小项目,适合刚学完JSP拿来练手的朋友. 源码地址: https://github.com/mudfish/userManager 项目说明: 软件需求: 开发工具:ecli ...

  5. SDL开发笔记(一):SDL介绍、编译使用以及工程模板

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  6. NSIS制作安装包笔记(二):NSIS使用NSIS+Qt界面制作安装包流程

    前言   Nsis可以使用duilib也可以使用qt界面,笔者主要qt,本文章梳理nsis+qt制作安装包的基本流程.   下载Nsis-Ui-Plugin插件   Github地址:https:// ...

  7. flask操作mongodb

    一个简单的注册登录 from pymongo import MongoClient MC = MongoClient('127.0.0.1', 27017) MongoDB = MC['s2'] #创 ...

  8. iOS的Runtime知识点繁杂难啃,真的理解它的思想,你就豁然开朗了

    一.Runtime 1.概念: 概念:Runtime是Objective-c语言动态的核心,即运行时.在面向对象的基础上增加了动态运行,达到很多在编译时确定方法推迟到了运行时,从而达到动态修改.确定. ...

  9. 2024年,提升Windows开发和使用体验实践 - 小工具篇

    前言 本来是一篇文章的,不知不觉写成了系列. 其实开工那几天就已经写好了长文,这几天一忙就没连着发了. 本文介绍一些 Windows 上用的小工具. 美化/折腾/小工具 虽然这是在用 Windows ...

  10. Hibernate-Validator扩展之自定义注解

    一.Hibernate-Validator介绍 ​ Hibernate-Validator框架提供了一系列的注解去校验字段是否符合预期,如@NotNull注解可以校验字段是否为null,如果为null ...