一、項目背景：實現(xiàn)仿抖音短視頻全屏視頻播放、點贊、評論、上下切換視頻、視頻播放暫停、分頁加載、上拉加載下一頁、下拉加載上一頁等功能。。。
二、前言：博主一開始一直想實現(xiàn)類似抖音進入頁面自動播放當前視頻，上下滑動切換之后播放當前視頻，但最后在ios上出現(xiàn)聲音播放，但畫面卡頓的問題，估計是ios的瀏覽器對自動播放做了安全限制，導致自動播放失效，為了功能的可用性，最終放棄自動播放，實現(xiàn)手動點擊視頻正中心的播放按鈕進行播放，再點擊視頻暫停，這個bug在安卓端暫時沒出現(xiàn)，大概率是ios的安全性更高導致的瀏覽器策略攔截了，需要用戶手動交互。
三、項目框架組件：uniapp h5項目、vue2、 swiper組件、video組件
四、效果：
仿抖音全屏視頻切換播放暫停
五、布局：可根據(jù)自已的項目需求進行修改，博主這里的邏輯是數(shù)據(jù)由接口返回，如果沒有視頻，就展示圖片，只有視頻才進行播放，標題最多展示三行，超過三行顯示‘展開’，點擊展開談起標題的底部彈窗，這里彈窗的代碼就不展示了，有需要可私信
<view class="widget-video pos-r" :style="{height:`${videoHeight}px`}">
<swiper class="video-list" :current="current" :style="{height:`${videoHeight}px`}" :vertical="true"
@change="changeHandler" @transition="transitionHandler" @touchstart="touchStart" @touchend="touchEnd">
<swiper-item class="video-item" :style="{height:`${videoHeight}px`}" v-for="(item, index) in datas"
:key="index">
<video
v-if="!$util.validatenull(item.videourl) || !$util.validatenull(item.videourl_low) || !$util.validatenull(item.videourl_fhd) || !$util.validatenull(item.videourl_hd)"
class="thumb-img" :id="`video_${item.id}`" :src="item.videourl" :show-progress="false"
:show-fullscreen-btn="false" :show-play-btn="false" :loop="true" :show-center-play-btn="false"
enable-play-gesture :poster="item.thumb" preload="auto" x5-playsinline="" playsinline="true"
webkit-playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5"
x5-video-player-fullscreen="" x5-video-orientation="portraint" @click="playOrpauseFn">
</video>
<image v-else class="thumb-img" :src="item.thumb" mode="aspectFit"></image>
<template v-if="item.videourl || item.videourl_fhd || item.videourl_hd || item.videourl_low">
<image v-if="showPlayIcon" class="play-icon pos-a pos-tl-c"
:src="$util.isCandu()?'/static/h5AndWeixin/home/cd_video_play.png':'/static/h5AndWeixin/home/common_icon_item_video_play.png'"
mode="aspectFill" @tap="playOrpauseFn">
</image>
</template>
<view class="calcwidth pos-a pos-bottom padding-l padding-b">
<view class="wrapper" @click="openIntroducePop(item.title,item.description)">
<view :id="'video-title'+item.id" class="c-f video-title"
:style="{fontSize:$util.isElder()?'39rpx':'30rpx',maxHeight: titleMaxHeight}">
<text v-if="showExpand" class="expand">展開</text>
{{item.title}}
</view>
</view>
<from-time-view :item="item" :hideViews="true" :textColor="'#fff'"></from-time-view>
</view>
<view class="right-icon-wrap pos-a dflex col-s flex-d pos-right">
<view v-if="item.allow_comment === 1" class="pos-r tac mt30">
<image
:style="{width:$util.isElder()?'104rpx':'80rpx',height:$util.isElder()?'104rpx':'80rpx'}"
src="/sub-live/static/comment.png"
@click="openCommentPop(item.catid,item.contentid,item.id)" mode="scaleToFill">
</image>
<view v-if="commentCount> 0" class="zan-num tac pos-a pos-b-full"
:style="{fontSize:$util.isElder()?'32rpx':'20rpx',backgroundColor:$config.INFO.SUB_THEME_COLOR}">
{{$util.filterViews(commentCount)}}
</view>
</view>
<view v-if="item.islike === 1" class="pos-r tac mt30">
<image
:style="{width:$util.isElder()?'104rpx':'80rpx',height:$util.isElder()?'104rpx':'80rpx'}"
:src="likeObj.liked ? '/sub-live/static/zan-active.png' : '/sub-live/static/zan-inactive.png'"
mode="scaleToFill" @click="goZanFn(item.catid,item.id)">
</image>
<view v-if="likeObj.like_count > 0" class="zan-num tac pos-a pos-b-full"
:style="{fontSize:$util.isElder()?'32rpx':'20rpx',backgroundColor:$config.INFO.SUB_THEME_COLOR}">
{{$util.filterViews(likeObj.like_count)}}
</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="nav-bar dflex padding-left-and-right pos-a pos-top">
<image :style="{width:$util.isElder()?'39rpx':'30rpx',height:$util.isElder()?'39rpx':'30rpx'}"
src="/static/h5AndWeixin/public/white-back.png" @click="goBack"></image>
</view>
</view>
六、js：主要展示視頻代碼
data() {
return {
videoHeight: uni.getWindowInfo().windowHeight，
current: 0,
datas: [],
page: 0, // 當前頁0，上一頁-1，下一頁1
showPlayIcon: false,
pageStartY: 0,
pageEndY: 0,
titleMaxHeight: '',
showExpand: false,
videoCtx: null
};
},
onLoad() {
// 獲取當前頁數(shù)據(jù)
this.getvideolists();
},
methods: {
getvideolists() {
const _this = this;
// 請求數(shù)據(jù)，改成自已接口的路徑和參數(shù)
_this.$api.getVerticalVideoList({
catid: _this.catid,
id: _this.id, // 請求上一頁傳第一條數(shù)據(jù)的id,請求下一頁傳最后一條數(shù)據(jù)的id
page: _this.page
}).then(res => {
if (res.data) {
// 判斷是否有數(shù)據(jù)，有數(shù)據(jù)才進行操作
if (!_this.$util.validatenull(res.data.lists)) {
// 下拉加載上一頁，將數(shù)據(jù)插入當前數(shù)據(jù)的頭部，并且播放數(shù)據(jù)的最后一條
if (_this.current === 0 && _this.page === -1) {
_this.datas.unshift(...res.data.lists);
_this.current = res.data.lists.length - 1;
} else {
// 上拉加載下一頁，將數(shù)據(jù)添加到當前數(shù)據(jù)的尾部
_this.datas.push(...res.data.lists);
}
const firstItem = _this.datas[0];
// 只創(chuàng)建當前視頻的播放器，以免卡頓
_this.playOrpauseFn();
}
}
}).catch((err) => {
console.error(err);
})
},
// 上下切換視頻
changeHandler(e) {
const _this = this;
if (e.detail.source == 'touch') {
const {
current
} = e.detail;
// 將播放按鈕隱藏
_this.showPlayIcon = false;
// 設(shè)置當前視頻
_this.current = current;
// 只創(chuàng)建當前視頻播放器，播放當前視頻，暫停其他視頻
_this.playOrpauseFn();
}
},
transitionHandler(e) {
if (e.detail.dy === 0) {
// 最后一條數(shù)據(jù)上拉加載下一頁
if (this.current === this.datas.length - 1) {
if (this.pageStartY > this.pageEndY) {
this.page = 1;
this.id = this.datas.at(-1).id;
this.getvideolists();
}
}
// 第一條數(shù)據(jù)下拉加載上一頁
if (this.current === 0) {
if (this.pageStartY < this.pageEndY) {
this.page = -1;
this.id = this.datas.at(0).id;
this.getvideolists();
}
}
}
},
// 獲取當前觸發(fā)的縱坐標以此來判斷是上拉還是下拉
// 記錄開始滑動的手指的縱坐標
touchStart(res) {
if (this.current === this.datas.length - 1 || this.current === 0) {
this.pageStartY = res.changedTouches[0].pageY;
}
},
// 記錄滑動結(jié)束的手指的縱坐標
touchEnd(res) {
if (this.current === this.datas.length - 1 || this.current === 0) {
this.pageEndY = res.changedTouches[0].pageY;
}
},
// 根據(jù)視頻id創(chuàng)建播放器
playOrpauseFn() {
let video_id = this.datas[this.current].id;
this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);
// 點擊播放按鈕視頻播放，按鈕隱藏，再點擊視頻暫停，按鈕顯示
if (this.showPlayIcon) {
this.videoCtx.seek(0);
this.videoCtx.play();
this.showPlayIcon = false;
} else {
this.videoCtx.pause();
this.showPlayIcon = true;
}
}
}
七、sass:文章來源：http://www.zghlxwxcb.cn/news/detail-681224.html
.widget-video {
width: 100%;
background-color: #000;
overflow: hidden;
.nav-bar {
width: 100%;
height: 88rpx;
}
}
.video-list {
width: 100%;
height: 100%;
.video-item {
width: 100%;
position: relative;
.play-icon {
width: 64rpx;
height: 64rpx;
}
.right-icon-wrap {
// width: 112rpx;
bottom: 208rpx;
right: 18rpx;
.mt30 {
margin-top: 60rpx;
}
.zan-num {
// width: 68rpx;
margin: auto;
border-radius: 4rpx;
font-weight: 600;
color: #FFFFFF;
transform: scale(0.8);
}
}
.calcwidth {
width: calc(100% - 130rpx);
}
.wrapper {
display: flex;
width: 100%;
overflow: hidden;
.video-title {
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
position: relative;
}
.video-title::before {
content: '';
height: calc(100% - 42rpx);
float: right;
}
.expand {
position: relative;
float: right;
clear: both;
margin-left: 40rpx;
color: #A9A9B8;
cursor: pointer;
border: 0;
}
.expand::before {
content: '...';
position: absolute;
left: -10rpx;
color: #fff;
transform: translateX(-100%);
}
}
}
}
**end：**如果出現(xiàn)畫面卡頓，聲音播放等問題，請一定要關(guān)閉視頻自動播放功能。文章來源地址http://www.zghlxwxcb.cn/news/detail-681224.html
到了這里，關(guān)于uniapp h5 豎向的swiper內(nèi)嵌視頻實現(xiàn)抖音短視頻垂直切換，絲滑切換視頻效果，無限數(shù)據(jù)加載不卡頓的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
