短視頻滑動播放在 H5 下的實現(xiàn)方式
發(fā)布時間：2023-01-05 09:06:15 作者：林恒 
我要評論
我要評論短視頻已經(jīng)無數(shù)不在了，但是主體還是使用 app 來承載的，本文講述 H5 如何實現(xiàn) app 的視頻滑動體驗，本文對實現(xiàn)過程中踩到的坑做一個總結(jié)，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友跟隨小編一起看看吧
這里給大家分享我在網(wǎng)上總結(jié)出來的一些知識，希望對大家有所幫助
短視頻已經(jīng)無數(shù)不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實現(xiàn) app 的視頻滑動體驗。
無聲勝有聲，一圖頂百辯，且看下圖：
從上圖可以看到，我們主要實現(xiàn)的功能也是本文要講解的有：
- 上滑查看新短視頻
- 下滑查看歷史短視頻
- 滑動距離大于一個距離才上翻，否則歸位
- 滑動有速率的概念，如果速率達(dá)到一定值，距離不夠，也會翻頁
- 自動播放的問題
- 如何保證當(dāng)前視頻的播放流暢度
Let's do it ~~~~~~~~~~~~~~~~
本文文字說明可仔細(xì)看，很多采坑路上的總結(jié)。小程序下滑動視頻的采坑之路下篇跟上。
HTML + CSS 頁面結(jié)構(gòu)
頁面布局采用 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移出屏幕外來達(dá)到隱藏的目的，如果用display:none的話，用戶點擊可能會出現(xiàn)異常。
- 設(shè)置playsinline，讓視頻在當(dāng)前頁面播放而不是全屏。
- x5-video-can-play-with-audio=true，且先執(zhí)行播放音再播放視頻。如果不設(shè)置這個值，那么在微信h5頁面，會出現(xiàn)播放播放了視頻，音頻自動停止的場面。
ul 是一個外層列表，寬度 100%即可。每一個視頻項是一個充滿屏幕的節(jié)點。本文不做重點講述了，感興趣可以自行嘗試。
核心js代碼
監(jiān)聽用戶手勢，動態(tài)設(shè)置ul的translateY，然后執(zhí)行音頻和視頻的播放。so easy!
手勢滑動
手勢滑動播放視頻翻頁，主要有兩個條件：滑動距離和滑動加速度。
初始化 Touch 主要是重置參數(shù)，記錄最后的位移，存儲頁面的高度。綁定 touch 事件。
function Touch() {
this.init();
}
Touch.fn = Touch.prototype;
Touch.fn.init = function(params) {
this.lastY = this.translateY; //記錄當(dāng)前位移
this.startY = 0;
this.moveY = 0;
this.lock = 0; //如果在回調(diào)或上升階段不允許滑動.
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));
});
};
監(jiān)聽手勢的滑動
這里增加了一個 lock 變量，用于當(dāng)滑動翻頁的時候，頁面處在翻頁中的狀態(tài)，需要鎖死滑動，否則會錯亂。
lastY 是上一次滑動完之后的最終狀態(tài)距離，translateY 是指滑動中的狀態(tài)距離，需要實時變更 ul 的 translateY 的值
檢測滑動的加速度：detectAcc
var a = Math.abs(this.moveY) / (Date.now() - this.start) >= 0.5;
滑動的距離 大于 滑動的時間差的一半，則認(rèn)為是主動翻頁，需要執(zhí)行翻頁操作。
這里要注意點：ios 下再滑動過程中，可以立即執(zhí)行翻頁，體驗很好，但是 android 不行,所以安卓需要等 touchend 之后再執(zhí)行翻頁
Touch.fn.touchstart = function(e) {
if (this.lock) return;
this.startY = e.touches[0].pageY;
this.start = Date.now(); //標(biāo)識滑動起始時間，也用于標(biāo)識滑動start
};
Touch.fn.move = function(y) {
this.translateY = y;
};
Touch.fn.touchmove = function(e) {
if (this.lock || !this.start) return; //鎖定了，或者沒有start，主要是手勢一直滑動情況，已經(jīng)加速度劃走了，手勢需要松開再重新開始
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();
}
};
3.處理翻頁操作
設(shè)定翻頁需要滑動的最小距離，這里需要大于 1/3 個屏幕高度。
如果用戶滑動的距離大于最小滑動距離，則翻頁，否則執(zhí)行歸位。不管歸位還是滑動翻頁，都有一個 transition 的過程，這個過程我們不接受手勢，所以需要等到位移結(jié)束之后，才重置 Lock 標(biāo)識。
這里還用到了動態(tài)拉取下下一個視頻（我這里一次拉取兩個視頻），所以需要發(fā)出 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
* 這里是計算出了應(yīng)該位移高度。
*/
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);
});
注冊視頻組件
視頻和背景音兩種控制，如果視頻執(zhí)行 stalled 和 waiting 連續(xù)多次就代表視頻卡住了，需要 show 出加載中的 loading 框。
重點方法：onx5videoexitfullscreen 這個是 x5 瀏覽器在點擊了全屏之后，再返回頁面的時候，默認(rèn)是視頻 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("網(wǎng)絡(luò)有點慢哦~");
store.report(27, 1);
}
},
waiting: function() {
clearInterval(this.timer);
this.loadTimes = 0;
this.timer = setInterval(() => {
this.loadTimes++;
if (this.loadTimes >= 2) {
//連續(xù)3次未播放，當(dāng)作是卡住了
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的事件，處理背景音樂，監(jiān)聽上面手勢滑動的翻頁事件。
如果是微信環(huán)境，需要等待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();
}
}
預(yù)加載
預(yù)加載的前提是當(dāng)前視頻已經(jīng)加載完成了，才能預(yù)加載下一個視頻。需要標(biāo)識每一個視頻是否加載完成。
- 如果當(dāng)前視頻沒有加載完成，將會把預(yù)加載的視頻都干掉，防止占用當(dāng)前網(wǎng)絡(luò)
- 如果當(dāng)前視頻已經(jīng)加載完成，則一直預(yù)加載下一個，下下一個，對于網(wǎng)絡(luò)好的尤為明顯。
function checkLoading() {
let self = this;
var interval = window.setInterval(getLoaded,100);
// 獲取視頻已經(jīng)下載的時長
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
}
}
滑動視頻處理
滑動播放是關(guān)鍵，需要保證用戶手勢和執(zhí)行播放需要是同步的，否則會出現(xiàn)部分手機(jī)播放失效，需要多點擊一下播放。
- 如果是當(dāng)前視頻，則需要播放當(dāng)前視頻和音頻
- 需要停止還沒有下載完的視頻和音頻（停止的做法就是將視頻的url置空即可），否則影響當(dāng)前播放的順暢度。對于已經(jīng)下載完的了則不需要處理。
- 同一個頁面最大存在16個視頻(ios的限制)，已當(dāng)前視頻為中心，上下保留七個視頻，其余視頻全部display:none
function handleMove(self, direct, i) {
if (i == self.index) {
handleCurrent(self);
}
//direct>0 則是下滑,頁面出現(xiàn)上一個視頻，則當(dāng)前位置的下一個視頻要暫停，
//direct<0則是上滑，頁面要播放下一個視頻了，則當(dāng)前位置的上一個視頻要暫停
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個節(jié)點，則隱藏。
feed.playurl = ""; //最大超過16個節(jié)點，則把其他視頻干掉。
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
播放在不同的手機(jī)上可能會進(jìn)入error（abort,error,stall）,我們需要自動再出發(fā)一次播放，這個能解決一部分手機(jī)二次播放的問題，會無緣無故進(jìn)入error,導(dǎo)致視頻無法播放。
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
}
到此這篇關(guān)于短視頻滑動播放在 H5 下的實現(xiàn) 的文章就介紹到這了,更多相關(guān)H5滑動播放短視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
html5視頻自動橫過來自適應(yīng)頁面且點擊播放功能的實現(xiàn)
這篇文章主要介紹了h5視頻自動橫過來自適應(yīng)頁面且點擊播放,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-03- 本文通過實例代碼給大家介紹了HTML5聲音錄制/播放功能，非常不錯，具有參考借鑒價值，需要的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-03
- 這篇文章主要介紹了HTML5 解決蘋果手機(jī)不能自動播放音樂問題的相關(guān)資料,需要的朋友可以參考下2017-12-27
- 這篇文章主要介紹了有關(guān)HTML5中背景音樂的自動播放功能的相關(guān)資料,需要的朋友可以參考下2017-10-16
HTML5頁面音視頻在微信和app下自動播放的實現(xiàn)方法
現(xiàn)在大部分的H5頁面都有實現(xiàn)播放背景音樂，播放視頻功能。那怎么實現(xiàn)自動播放呢？下面小編給大家?guī)砹薍TML5頁面音視頻在微信和app下自動播放的實現(xiàn)方法2016-10-20
