暂时使用原生进度条。自定义进度条调试中

components/my-video-list/list-item.vue

@@ -1,27 +1,26 @@
 <template>
-	<view class="item" @appear="appear" @disappear="disappear" @click.stop 	:style="{height:height+'px'}" :key="index">
+	<view class="item" @appear="appear" @disappear="disappear" @click.stop :style="{height:height+'px'}" :key="index">
+
 
 		<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles" v-if="showVideo"
-			play-btn-position="center"
+			play-btn-position="center" :show-center-play-btn="false" :show-play-btn="false" :controls="!isPlying"
-			:show-center-play-btn="false"
+			@click.stop="videoClick()" @loadedmetadata="loadedmetadata" @timeupdate="timeupdate" @waiting="waiting()"
-			:show-play-btn="false"
+			object-fit="cover" @pause="onpause" @play="videoPlay('myVideo'+item.courseDetailsId,item.courseDetailsId)"
-			:controls="!isPlying"
+			:play-strategy="2" :show-loading="true" codec="software" :muted="false" :loop="loop"
-			@click.stop="videoClick()"
-			@loadedmetadata="loadedmetadata"
-			@timeupdate="timeupdate" @waiting="waiting()" object-fit="cover" @pause="onpause" 
-			@play="videoPlay('myVideo'+item.courseDetailsId,item.courseDetailsId)" :play-strategy="2"
-			:show-loading="true" codec="software" :muted="false"  :loop="loop"
 			:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
 			:autoplay="autoplay" @ended="ended" :id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"></video>
 
-		<image class="poster" v-else @click.stop="posterClick" :src="item.titleImg"
+
-			mode="aspectFill">
+		<image class="poster" v-else @click.stop="posterClick" :src="item.titleImg" mode="aspectFill">
 		</image>
-		
+		<!-- <view class="progress" v-if="showVideo&&!isPlying" @click.stop>
-		<view class="play-icon" v-if="videoIsLoadedmetadata&&showVideo&&!isPlying" @click.stop="videoClick()" :style="playStyle">
+			<progress-vue @touchstart="progressScroll" @touchend="progressScrollEnd"></progress-vue>
-			<image class="icon"  src="@/static/images/play.png" mode=""></image>
+		</view> -->
+		<view class="play-icon" v-if="videoIsLoadedmetadata&&showVideo&&!isPlying" @click.stop="videoClick()"
+			:style="playStyle">
+			<image class="icon" src="@/static/images/play.png" mode=""></image>
 		</view>
-		
+
 		<view class="info" v-if="!isCommand" :style="infoStyle">
 			<text class="color-fff" v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
 			<view v-if="item.content" v-html="item.content"></view>
@@ -64,6 +63,7 @@
 
 <script setup>
 	import * as Api from '@/api/video/index.js'
+	import progressVue from './progress.vue'
 	import {
 		computed,
 		nextTick,
@@ -79,13 +79,13 @@
 	// #endif
 
 	const props = defineProps({
-		isAndriod:{
+		isAndriod: {
 			type: Boolean,
 			default: false
 		},
-		height:{
+		height: {
-			type:Number,
+			type: Number,
-			default:0
+			default: 0
 		},
 		item: {
 			type: Object,
@@ -111,7 +111,7 @@
 				}
 			}
 		},
-		isTabbar:{
+		isTabbar: {
 			type: Boolean,
 			default: false
 		},
@@ -158,16 +158,31 @@
 			default: true
 		}
 	})
+
+	let playPercent = ref(0)
+
+
 	let autoplay = ref(props.item.videoUrl ? true : false)
 
 	const emits = defineEmits(['controlstoggles', 'disappear', 'appear', 'waiting', 'videoPlay', 'ended', 'dianzanClick',
-		'share', 'zhuijuClick', 'popupShow', 'itemMounted', 'toDetail',  'playStatusChange'
+		'share', 'zhuijuClick', 'popupShow', 'itemMounted', 'toDetail', 'playStatusChange', 'progressScroll',
+		'progressScrollEnd'
 	])
-	function posterClick(){
+
-		if(!props.item.videoUrl){
+	function progressScroll(e) {
-			popupShow('pay',props.item)
+		emits('progressScroll')
+	}
+
+	function progressScrollEnd(e) {
+		emits('progressScrollEnd')
+	}
+
+	function posterClick() {
+		if (!props.item.videoUrl) {
+			popupShow('pay', props.item)
 		}
 	}
+
 	function controlstoggles(e) {
 		console.log('controlstoggles');
 		console.log(e);
@@ -184,10 +199,11 @@
 	function waiting() {
 
 	}
-	
+
-	let videoIsLoadedmetadata=ref(false)
+	let videoIsLoadedmetadata = ref(false)
-	function loadedmetadata(){
+
-		videoIsLoadedmetadata.value=true
+	function loadedmetadata() {
+		videoIsLoadedmetadata.value = true
 	}
 
 
@@ -214,6 +230,9 @@
 	}
 
 	function timeupdate(e) {
+		console.log('timeupdate');
+		console.log(e);
+		playPercent.value = e.detail.currentTime * 100 / e.detail.duration
 		//隐藏loding
 		uni.hideLoading()
 		if (isPlayFinish) {
@@ -232,7 +251,9 @@
 			sendPlayStatus('start')
 		}
 		isFirstPlay = false
-		isPlying.value = true
+		setTimeout(() => {
+			isPlying.value = true
+		}, 100)
 		// #ifdef H5
 		emits('controlstoggles', {
 			detail: {
@@ -240,12 +261,14 @@
 			}
 		})
 		// #endif
-		
+
 
 	}
 
 	function onpause() {
-		isPlying.value = false
+		setTimeout(() => {
+			isPlying.value = false
+		}, 100)
 		// #ifdef H5
 		emits('controlstoggles', {
 			detail: {
@@ -253,7 +276,7 @@
 			}
 		})
 		// #endif
-		
+
 	}
 
 
@@ -305,17 +328,17 @@
 	let video = null
 
 	function disappear(e) {
-		emits('disappear',e)
+		emits('disappear', e)
 		if (video) {
 			video.pause()
 		}
 	}
 	const showVideo = computed(() => {
-		if(props.isAndriod){
+		if (props.isAndriod) {
 			console.log('props.nowIndex === props.index ');
-			console.log(props.nowIndex,props.index );
+			console.log(props.nowIndex, props.index);
-			return (props.nowIndex === props.index && props.item.videoUrl) ?true :false
+			return (props.nowIndex === props.index && props.item.videoUrl) ? true : false
-		}else{
+		} else {
 			return props.current === props.index && props.item.videoUrl
 		}
 	})
@@ -355,7 +378,7 @@
 			video = null
 		}
 	})
-	
+
 	const customStyle = computed(() => {
 		// #ifdef H5
 		return {
@@ -366,14 +389,14 @@
 		return {}
 		// #endif
 	})
-	const playStyle=computed(()=>{
+	const playStyle = computed(() => {
-		if(isPlying.value){
+		if (isPlying.value) {
 			return {
-				bottom:'0'
+				bottom: '0'
 			}
 		}
 		return {
-			bottom: props.isTabbar ? (50+44 +'px') : '44px'
+			bottom: props.isTabbar ? (50 + 44 + 'px') : '44px'
 		}
 	})
 	const infoStyle = computed(() => {
@@ -509,7 +532,8 @@
 		justify-content: center;
 		align-items: center;
 	}
-	.play-icon{
+
+	.play-icon {
 		position: absolute;
 		left: 0;
 		right: 0;
@@ -517,12 +541,13 @@
 		bottom: 0;
 		justify-content: center;
 		align-items: center;
-		$icon-size:80rpx;
+		$icon-size: 80rpx;
-		.icon{
+
+		.icon {
 			width: $icon-size;
 			height: $icon-size;
 		}
-		
+
 	}
 
 	.hot {
@@ -541,6 +566,15 @@
 		}
 	}
 
+	.progress {
+		padding: 20rpx;
+		position: absolute;
+		bottom: 20rpx;
+		left: 0;
+		right: 0;
+		z-index: 1;
+	}
+
 	.zhifubao {
 		width: 56rpx;
 		height: 56rpx;

components/my-video-list/my-video-list.vue

@@ -1,6 +1,6 @@
 <template>
 	<list v-if="showAndriod" :bounce="false" :loadmoreoffset="wHeight*3" :show-scrollbar="false" ref="listBox"
-		:pagingEnabled="true" @loadmore="loadmore" :scrollable="true">
+		:pagingEnabled="true" @loadmore="loadmore" :scrollable="scrollable">
 		<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
 			<view class="swipers-items" :style="boxStyle" @longpress="popupShow('speed')">
 				<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
@@ -10,12 +10,16 @@
 					:nowIndex="nowIndex" @appear="appear($event,item,index)" :playSpeeds="playSpeeds"
 					@disappear="disappear($event, item,index)" @dianzanClick="dianzanClick(item,index)"
 					@share="share(item)" @zhuijuClick="zhuijuClick(item)"
+					@progressScroll="progressScroll"
+					@progressScrollEnd="progressScrollEnd"
 					@popupShow="popupShow($event,item,index)"></list-item-vue>
 			</view>
 		</cell>
 	</list>
 	<view v-if="isH5||isIos" class=" w-full box" style="width: 100vw;">
-		<swiper @longpress="popupShow('speed')" :style="{height:wHeight+'px'}" v-if="videoList.length"
+		<swiper
+		@longpress="popupShow('speed')"
+		:style="{height:wHeight+'px'}" v-if="videoList.length"
 			@change="swiperChange" :current="current" :circular="true" vertical class="u-flex-1"
 			@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
 			<swiper-item v-for="(item,index) in videoList" :key="index">
@@ -260,6 +264,17 @@
 		getCurrentInstance,
 		onUnmounted
 	} from 'vue';
+	
+	
+	let scrollable=ref(true)
+	
+	function progressScroll(){
+		scrollable.value=false
+	}
+	function progressScrollEnd(){
+		scrollable.value=true
+	}
+	
 
 	let isH5 = false
 	// #ifdef H5
@@ -310,6 +325,8 @@
 			}
 		}
 	})
+	
+	
 	const control = reactive({
 		showBack: true,
 		showControls: true

components/my-video-list/progress.vue

@@ -0,0 +1,68 @@
+<template>
+	<view class="progress-box">
+		<view class="line" :style="{width:percent+'px'}">
+		</view>
+		<view class="block" @touchstart="progressTouchStart" @touchmove="progressTouchMove"
+		:style="{transform:'translateX('+percent+'px)'}"
+			@touchend="progressTouchEnd"></view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue';
+	const props=defineProps({
+	})
+	
+	
+	let percent=ref(50)
+	//进度条
+	let progressIsTouch = false
+	let start = 0
+	function progressTouchStart(e) {
+		console.log(e);
+		start = e.touches[0].clientX
+		progressIsTouch = true
+	}
+
+	function progressTouchMove(e) {
+		console.log(e);
+		const step = 1;
+		playPercent.value += step
+	}
+
+	function progressTouchEnd(e) {
+		console.log(e);
+		progressIsTouch = false
+	}
+</script>
+
+<style lang="scss" scoped>
+	.progress-box {
+		border-radius: 20px;
+		height: 5px;
+		margin:  4px 0;
+		background-color: rgba(255, 255, 255, .6);
+		box-shadow: 0 0 1px #eee;
+		flex-direction: row;
+		overflow: visible;
+		.line {
+			background-color: #fff;
+			border-radius: 20px;
+			overflow: visible;
+		}
+		$block-size: 8px;
+		.block {
+			top: -1px;
+			left: 0;
+			position: absolute;
+			z-index: 2;
+			width: $block-size;
+			height: $block-size;
+			background-color: #fff;
+			border-radius: 50%;
+			box-shadow: 0 0 1px #eee;
+		}
+	}
+</style>