uniapp 小程序实现类似抖音的简易刷视频功能

🕗 发布于 2024-07-25 20:04 uni-app 小程序 音视频

uniapp 小程序实现类似抖音的简易刷视频功能

先上视频

20240725-163843

直接上代码

代码中使用的是 uniapp 组件 swiper slider
slider
swiper

2. 代码中使用的  <tab-bar></tab-bar> 组件 是我自定义的组件  可以删除
3. 代码中的图片地址以及视频地址请更换为自己的路径

<template>
<view>
<view class="uni-padding-wrap">
<view class="page-section swiper">
<view class="page-section-spacing">
<swiper class="swiper" @change="changefun" @animationfinish="animationfinishfun" :current="index_"
:vertical="true">
<swiper-item v-for="(item,index) in videoList">
<view class="swiper-item" @click.stop="playPause(index)">
<image src="https://xxxxxxxxxxxxxx.com/2021083111362225433.png" v-if="!isPlay" class="btn play">
</image>
<image src="https://xxxxxxxxxxxxxx.com/2021083111373735978.png" v-if="isPlay&&firstclick"
class="btn pause"></image>
<video :custom-cache="false" loop="true" class="video" :id="'id'+index" :duration="item.duration"
:enable-progress-gesture="true" :controls="false" @timeupdate="(e)=>videoUpdate(e,item,index)"
:src="item.vlogUrl" :show-center-play-btn="false">
</video>
</view>
</swiper-item>
</swiper>
</view>
</view>
<tab-bar></tab-bar>
</view>
<view v-if="is_active">
<view class="left">
<view class="left_box">
<!--   #ifdef MP-ALIPAY   -->
<view>
<!--   #endif  -->
<view class="slider">
<slider v-model="activeObj.currentTime" @change="sliderChange" @changing="sliderChanging"
:activeColor="!isPlay || !updateState ?'#ffffff':'#ffffff4D'"
:block-size="!isPlay || !updateState?14:12" :block-color="!isPlay|| !updateState?'#ffffff':'#6e6f71'"
backgroundColor="#4f5253"></slider>
</view>
</view>
</view>
</view>

</view>
</template>

<script>
import tabBar from "../../../components/tabBar/tabBar";
export default {
components: {
tabBar
},
data() {
return {
videoList: [],
index_: null,
index: '0',
firstclick: false,
is_active: true,
isPlay: true,
activeObj: null,
sending: false,
contentId: '',
updateState: true,
videoContext: null,
}
},
onLoad(option) {
// 此接口用来查第一个视频详细信息
// this.$uniApi.dataRequestNoLoading('GET', 'base/app/v1/contentApp/getDefaultVlogId').then(res => {
// 我在此处替换为假数据
let res = {
"code": 1,
"data": {
"id": "1806517903331479553",
"title": "一日游",
"subtitle": null,
"coverImage": "https://xxxxxxxxxxxxxx.com/171954161525350063.jpg", // 请更换为自己的视频
"readingSum": "239",
"rankingInclude": null,
"includeContain": null,
"vlogUrl": "https://xxxxxxxxxxxxxx.com/2024062810390955101.mp4", // 请更换为自己的图片
"type": 9,
"salesNum": null,
"marketPrice": null,
"coverImageHeight": 702,
"coverImageWeight": 1080,
"headImgUrl": "https://xxxxxxxxxxxxxx.com/171954159983539103.png", // 请更换为自己的图片
"author": "一日游",
"isTopping": "0"
},
"msg": "成功",
"success": true
}
let id = res.data.id || ""
this.contentId = id
let obj = Object.assign({}, {
id: id
})
obj['istrue'] = false
obj['contentId'] = id
obj['currentTime'] = 0
//  用来计算滚动条
obj['duration'] = 0
// 视频链接
obj['vlogUrl'] = res.data.vlogUrl
// 
this.videoList.push(obj)
// 查找视频列表   我的接口是根据当前的视频 id 去查后面的视频
// 一次查的太多会导致卡顿
this.oprateVideoList(this.contentId)
// 初始化第一个视频 并播放
this.$nextTick(function() {
let videoContext = uni.createVideoContext(`id0`)
videoContext.play()
})
// })

},
watch: {
index_(val) {
this.videoContext = uni.createVideoContext(`id${this.index_}`)
this.contentId = this.videoList[val]['contentId']
},
activeObj(val, oldval) {
if (!oldval) {
this.$nextTick(function() {
let videoContext = uni.createVideoContext(`id${this.index_}`)
videoContext.play()
})
}
}
},
methods: {
// current 改变时会触发 change 事件，event.detail = {current: current, source: source}
// 暂停当前的视频播放
changefun(e) {
this.is_active = false
let videoContext = uni.createVideoContext('id' + this.index_)
videoContext.pause()
},
playPause(current) {
// 点击视频时  如果播放就暂停 如果是暂停就开始播放
let videoContext = uni.createVideoContext('id' + current)
this.firstclick = true
if (this.isPlay) {
videoContext.pause()
this.isPlay = false
} else {
videoContext.play()
this.isPlay = true
}
},
// 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}
animationfinishfun(e) {
let that = this
this.isPlay = true
// 获取下标
let current = e.detail.current
this.activeObj = this.videoList[current]
this.index_ = current
this.is_active = true
this.videoList[current]['istrue'] = true
// 获取当前的 video 标签 并暂停播放
let videoContext = uni.createVideoContext('id' + this.index_)
videoContext.pause()
// 初始化新的video 并播放
videoContext = uni.createVideoContext('id' + current)
videoContext.play()
//  视频滑到最后一个 就再去请求新的 视频列表
if (this.videoList.length > 0 && current + 1 == this.videoList.length && !this.sending) {
this.oprateVideoList(this.videoList[current]['contentId'])
}
},

videoUpdate(e, item, index) {
// 此处用来计算进度条
if (this.updateState) {
// #ifdef MP-WEIXIN
if (e.target.id == 'id' + index) {
this.videoList[this.index_]['currentTime'] = e.detail.currentTime / e.detail.duration * 100
this.videoList[this.index_]['duration'] = e.detail.duration
}
// #endif
// #ifdef MP-ALIPAY
this.videoList[this.index_]['currentTime'] = e.detail.currentTime / e.detail.videoDuration * 100
this.videoList[this.index_]['duration'] = e.detail.videoDuration
// #endif
}
},
// 拖动过程中触发的事件，event.detail = {value: value}
sliderChanging(e) {
this.updateState = false
},
//拖动进度条触发事件
sliderChange(e) {
let duration = this.videoList[this.index_]['duration']
if (duration) {
this.videoContext.seek(e.detail.value / 100 * duration); //完成拖动后，计算对应时间并跳转到指定位置
this.videoList[this.index_]['duration'] = e.detail.value
this.updateState = true
}
},
// 获取视频列表
oprateVideoList(id) {
let that = this
this.sending = true
// this.$uniApi.dataRequestNoLoading('GET', 'base/app/v1/contentVlog/getVlogListByContentId', {
// contentId: id,
// }).then(resp => {

let resp = {
"code": 1,
"data": [{
"contentId": "1606207777364082690",
"title": "vlog啊",
"coverImage": "https://xxxxxxxxxxxxxx.com/167178470537619117.png",
"vlogUrl": "https://xxxxxxxxxxxxxx.com/2022122316383441583.mp4"
}, {
"contentId": "1684011338528985090",
"title": "vlog",
"coverImage": "https://xxxxxxxxxxxxxx.com/169033454163171300.png",
"vlogUrl": "https://xxxxxxxxxxxxxx.com/2023072609222991294.mp4"
}, {
"contentId": "1678315077972848642",
"title": "阿达啊",
"coverImage": "https://xxxxxxxxxxxxxx.com/168897636035107597.png",
"vlogUrl": "https://xxxxxxxxxxxxxx.com/2023071016074361328.mp4"
}],
"msg": "成功",
"success": true
}

resp.data.map(res => {
res['istrue'] = false
res['currentTime'] = 0
res['duration'] = 0
// return res
})
if (that.index_ === null) {
that.index_ = 0
}
that.videoList = that.videoList.concat(resp.data)
that.activeObj = that.videoList[that.index_]
that.sending = false
that.videoList[0]['istrue'] = true
// })

}
},

}
</script>
<style>
page {
background: #000;
}
</style>
<style scoped lang="scss">
.circle {
background: rgba(34, 34, 34, 0.4);
border-radius: 50%;
z-index: 2;
height: 70px;
width: 70px;
position: fixed;
top: 0;

bottom: 441rpx;
left: 31rpx;

margin: auto;

.red {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: 3;
height: 35px;
width: 35px;
}
}

.swiper {
height: 100vh;

.slider {
height: 20rpx;
position: absolute;
bottom: 67rpx;
left: 0;
width: 750rpx;

slider {
margin: 0;
}
}

.swiper-item {
height: 100vh;
position: relative;


.btn {
position: absolute;
width: 120rpx;
height: 120rpx;
background: none;
z-index: 2;
top: 50%;
margin-top: -60rpx;
left: 50%;
margin-left: -60rpx;

&.pause {
animation: benone .2s 2s linear forwards;
}
}

}
}

.video {
width: 100%;
height: 100vh;
position: relative;

}

.left_box {
position: fixed;
bottom: 55px;
left: 0rpx;
width: 100%;
height: 600rpx;
pointer-events: none;
z-index: 8;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));

.slider {
pointer-events: initial;
height: 20rpx;
position: absolute;
bottom: 67rpx;
left: 0;
width: 750rpx;

slider {
margin: 0;
}
}





::v-deep .u-icon {
position: fixed;
right: 40rpx;
bottom: 280rpx;
pointer-events: initial;
z-index: 10;
}
}




@keyframes benone {
from {
opacity: 1;
}

to {
opacity: 0;
}
}

.uni-padding-wrap {
background-color: #ffffff;
}
</style>

已完成！

原文地址：https://blog.csdn.net/weixin_45563734/article/details/140694261

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Spring AOP（2）原理(代理模式和源码解析)
下一篇：【区块链+绿色低碳】基于区块链的碳排放管理系统 | FISCO BCOS应用案例

linux线程cp模型，posix信号量，线程池，线程封装，单例模型，懒汉饿汉实现方式，自旋锁，读者写者模型
前面的同步，我们并没有一个很好的场景来模拟同步，只是简单的将有序的现象输出出来；现在我们来讲解一个比较合理且常见的模型——生产者消费者模型；
阅读更多2024-09-07
Qt/C++开源项目 TCP服务器调试助手（源码分享+发布链接下载）
该TCP服务器调试助手是用于测试和监控基于TCP协议的网络通信工具，能够帮助开发者便捷地进行网络通信调试。通过简洁的界面设计，用户可以轻松配置、管理TCP端口的连接，收发消息并进行数据监控分析。123
阅读更多2024-09-07
vue3整合antv x6实现图编辑器快速入门
例如：在上面节点基础上，我们有一个新的需求：给节点加上右键菜单。X6 支持使用 SVG、HTML 来渲染节点内容，在此基础上，我们还可以使用 React、Vue 组件来渲染节点，这样在开发过程中会非常
阅读更多2024-09-07
linux使用samba共享目录，其他虚拟机和windows都可以访问
linux使用samba共享目录，其他虚拟机和windows都可以访问
阅读更多2024-09-07
Linux系统编程实现ls -l | wc -l指令
由于该指令是通过管道的形式实现的，所以我们要使用系统函数pipe。ls -l |wc -l的作用就是统计当前目录有多少文件。由于父子间通过管道实现，所以存在读写阻塞问题，不用担心僵尸进程的产生，所以可
阅读更多2024-09-07
MySQL表操作及约束
MySQL表操作及约束
阅读更多2024-09-07
1.2CubeMAX创建FREERTOS入门示例
内核参数设置，用户根据自己的实际应用来裁剪定制。：相关宏的定义，可以自建一些常量在工程中使用。User Constants（用户常量）：定时器和信号量的创建。：用于查看堆使用情况。：任务与队列
阅读更多2024-09-07
YOLOv9改进策略【注意力机制篇】| PSA极化自我关注：实现高质量像素回归
本文记录的是基于PSA注意力模块的YOLOv9目标检测方法研究。PSA模块。本文将其应用到YOLOv9的检测任务中，使模型能够更好地捕捉图像中的细节信息，以实现目标检测任务中准确识别和定位。
阅读更多2024-09-07
爆改YOLOv8|利用yolov10的SCDown改进yolov8-下采样
yolov8改进，yolov10, 下采样SCDown, 即插即用
阅读更多2024-09-07
PDF样本图册转换为一个链接，随时打开无需印刷
想象一下，您手中有一本厚重的样本图册，里面包含了丰富多样的内容，如产品介绍、项目方案、学术论文等。在过去，您需要逐一翻阅、筛选，甚至为了便于查看，不得不将其印刷出来。如今，借助先进的数字化技术，还能实
阅读更多2024-09-07

uniapp 小程序实现类似抖音的简易刷视频功能

uniapp 小程序实现类似抖音的简易刷视频功能

相关文章