jiuyiUniapp/jiuyi/components/index/videoProgress.vue

<script setup>
	/**
	 * 视频进度条
	 */
	import {
		ref,
		computed,
		defineEmits,
		onMounted,
		getCurrentInstance
	} from 'vue';

	// 接收
	const props = defineProps({
		time: {
			type: Object,
			default: {
				duration: 0,
				currentTime: 0,
			}
		},
		// 组件宽度
		viewWidth: {
			type: Number
		}
	})
	// 触发
	const emit = defineEmits(['change', 'end'])
	// 
	const {
		proxy
	} = getCurrentInstance()
	// 拖拽开关
	const trigger = ref(false)
	// 视频播放时间
	const videoTime = ref(0)
	// 视频进度
	const videoProgress = ref(0)
	// 视频当前
	const videoCurrent = computed(() => {
		let result = formatNum(props.time.currentTime)
		if (trigger.value) result = videoTime.value
		return result
	})
	// 进度条长度
	const progress = computed(() => {
		let result = 0
		if (!trigger.value) {
			const duration = formatNum(props.time.duration)
			if (duration != 0) result = formatNum(props.time.currentTime) / duration * props.viewWidth
			result = formatNum(result)
		} else {
			result = videoProgress.value
		}
		return result
	})
	// 格式化视频时长
	const formatDuration = computed(() => {
		let result = formatNum(props.time.duration).toFixed(2)
		return result
	})

	// 格式化数字
	function formatNum(num) {
		let result = Number.parseFloat(num).toFixed(2)
		return Number.parseFloat(result)
	}

	// 开始触摸
	function onStart() {
		trigger.value = true
	}

	// 触摸移动
	function onMove(ev) {
		// 横轴移动像素
		const time = formatNum(ev.changedTouches[0].screenX)
		// 当前进度
		let target = formatNum(formatNum(time / props.viewWidth) * Number(formatDuration.value))

		videoTime.value = target
		videoProgress.value = time
	}

	// 移动结束
	function onEnd(ev) {
		trigger.value = false
		// 视频播放时间
		emit('change', {
			time: videoTime.value,
		})
	}
</script>

<template>
	<view class="timeBox fdr jcc" v-if="trigger">
		<view class="time fdr jcc">
			<text class="text f1">{{videoCurrent}}</text>
			<text class="text">/</text>
			<text class="text f1">{{formatDuration}}</text>
		</view>
	</view>

	<view class="durationBox" ref="durationBoxRef" @touchstart.stop="onStart" @touchmove.stop="onMove" @touchcancel="onEnd" @touchend.stop="onEnd">
		<!-- <slider :min="0" :max="formatDuration" @change="change" /> -->
		<view class="duration">
			<view class="line" :style="{ width: progress + 'px' }"></view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.timeBox {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 300rpx;
		text-align: center;
		z-index: 9;

		.time {
			width: 400rpx;
			padding: 0 20rpx;
			background-color: rgba(0, 0, 0, .6);
			border-radius: 10rpx;
		}

		.text {
			margin: 10rpx 20rpx;
			font-size: 50rpx;
			color: #fff;
		}
	}

	// 视频时长
	.durationBox {
		padding-top: 60rpx;
		// background-color: red;
		// z-index: 10;

		.duration {
			width: 750rpx;
			background-color: rgba(255, 255, 255, .3);

			// 时间时长
			.line {
				width: 0;
				height: 2rpx;
				background-color: rgba(255, 255, 255, .8);
				transition-duration: .25s;
			}
		}
	}
</style>