devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3+ts实现视频根据时间轴截取，并可以通过传入截取起止时间进行当前剪辑的回显_现视频根据时间轴截取,并可以通过传入截取起止时间进行当前剪辑的回显

作者：weixin_40725706 | 2024-02-22 13:03:17

赞

踩

现视频根据时间轴截取,并可以通过传入截取起止时间进行当前剪辑的回显

 公司提出想做一个视频编辑功能，每次只裁剪一段即可，UI同时也想实现时间轴为关键帧图片的效果，从网上也没找到合适的组件，简单思考后觉得并不难，决定自己封装一个吧。组件涉及到的只有vue3+ts+scss，没有使用其他插件。

穿插一个简化版本，时间轴是一条线，功能比这个简化，或许会符合部分人的需求。

链接vue3+ts实现视频根据时间轴截取_vue项目截取一段正在播放的视频_一个人的咖啡~的博客-CSDN博客

功能概述

通过传入源视频时长，源视频的视频地址，当前剪辑的开始时间，当前剪辑的结束时间和关键帧缩略图（需要20张图片，后端提供，根据视频时长分为20节，每节取一张图）五个必传参数，视频地址将通过video标签播放，组件尺寸为100%，根据父级组件的宽度自动撑满。

时间轴模块，会根据传入的起止时间自动换算出1px===毫秒数，起止时间间隔我设置了1秒以上，开始时间拖动到结束时间前一秒左右将停止移动，结束时间拖动到开始时间后一秒左右将无法拖动，拖动开始时间时会自动将video标签的开始播放时间定位到截取的开始时间，设置结束时间后，video播放到截取的结束时间后会自动暂停，这时video标签将只能播放所截取的起止时间范围的视频。最后设置了回调queryTime()，通过回调将起止时间传出，我的业务中视频截取是后端操作，前端只需要提供截取的起止时间即可，具体看代码，如下：

参数描述
endTime视频结束时间，精确到毫秒
url视频地址，将通过video标签展示
spliterStartTime视频截取开始时间
spliterEndTime视频截取结束时间
photoList时间轴缩略图列表

回调描述
回调方法回调参数（形参）参数描述
queryTimeArray[开始时间，结束时间]

template部分

  1. <template>
  2. 	<video id="videoPlayer" @play="onplay" controls="true" preload="auto" muted class="video" width="100%"
  3. 		:src="props.url"></video>
  4. 	<ul class="time-list">
  5. 		<li v-for="item in data.timeList" :key="item">{{item}}</li>
  6. 	</ul>
  7. 	<div class="crop-filter">
  8. 		<div class="timer-shaft" ref="shaft">
  9. 			<div class="white-shade" :style="{width:(data.endLeft-data.startLeft+12)+'px',left:data.startLeft-6+'px'}">
  10. 			</div>
  11. 			<div class="left-shade" :style="{width: (data.startLeft-6)+'px'}"></div>
  12. 			<div class="right-shade" :style="{width: (shaft?.clientWidth-data.endLeft-6) +'px'}"></div>
  13. 			<div class="strat-circle circle" ref="start" @mousedown="startMouseDown">
  14. 				<div class="center"></div>
  15. 			</div>
  16. 			<div class="end-circle circle" ref="end" @mousedown="endMouseDown">
  17. 				<div class="center"></div>
  18. 			</div>
  19. 			<!-- 此处src应绑定item -->
  20. 			<img @dragstart.prevent style="width: 5%;user-select: none;" v-for="item in props.photoList"
  21. 				src="../../../public/favicon.ico" alt="">
  22. 		</div>
  23. 	</div>
  24. </template>

分为三个部分，上面是video标签，中间是根据总时长处理出的时间数组，下面是时间轴。

script部分

  1. <!-- 起止时间间隔最小≈1秒 -->
  2. <script setup lang="ts">
  3. 	import {
  4. 		getNowTime,
  5. 		dateStrChangeTimeTamp,
  6. 		cropFilter,
  7. 		videoRef,
  8. 	} from '@/types/type'
  9. 	// 进度条dom
  10. 	const shaft = ref(null);
  11. 	// 开始按钮dom
  12. 	const start = ref(null);
  13. 	// 结束按钮dom
  14. 	const end = ref(null);
  15. 	const data = reactive(new cropFilter)
  16. 	// props参数类型
  17. 	interface Props {
  18. 		startTime ? : string;
  19. 		endTime: string;
  20. 		url: string;
  21. 		spliterStartTime ? : string;
  22. 		spliterEndTime: string;
  23. 		// 此处为模拟
  24. 		photoList: string[];
  25. 	}
  26. 	// 设置默认值,需要显式的开启,具体查看vue3文档
  27. 	const props = withDefaults(defineProps < Props > (), {
  28. 		startTime: '00:00:00.0',
  29. 		endTime: '00:00:08.0',
  30. 		spliterStartTime: '00:00:00.0',
  31. 		spliterEndTime: '00:00:08.0',
  32. 		url: '',
  33. 		photoList: [],
  34. 	})
  35. 	const emit = defineEmits(['queryTime'])
  36. 	onMounted(() => {
  37. 		// 随便拼一个1970年以后的年月日字符串+' '
  38. 		let str = '1970-01-02 '
  39. 		let time = dateStrChangeTimeTamp(str + props.endTime) - dateStrChangeTimeTamp(str + props.startTime)
  40. 		data.roal = time / shaft.value.clientWidth
  41. 		// 结束毫秒数
  42. 		let endM = (dateStrChangeTimeTamp('1970-01-02 ' + props?.spliterEndTime) - (1000 * 60 * 60 * 16))
  43. 		// 开始毫秒数
  44. 		let startM = (dateStrChangeTimeTamp('1970-01-02 ' + (props?.spliterStartTime)) - (1000 * 60 * 60 * 16))
  45. 		console.log(startM, endM)
  46. 		// 设置开始结束位置
  47. 		start.value.style.left = startM / data.roal - (end.value.clientWidth / 2) + 'px'
  48. 		end.value.style.left = endM / data.roal - (end.value.clientWidth / 2) + 'px'
  49.  
  50. 		data.endLeft = end.value.offsetLeft
  51. 		data.endright = shaft.value.clientWidth - (end.value.clientWidth / 2)
  52. 		data.startLeft = start.value.offsetLeft + (start.value.clientWidth / 2)
  53. 		getVideoTime()
  54. 		data.timeList.push(props.startTime)
  55. 		let paragraph = (dateStrChangeTimeTamp(str + props.endTime) - (1000 * 60 * 60 * 16)) / 5
  56. 		for (let i = 1; i < 6; i++) {
  57. 			data.timeList.push(getNowTime(paragraph * i))
  58. 		}
  59. 	})
  60. 	// 播放事件
  61. 	const onplay = () => {
  62. 		let myVideo: videoRef = document.getElementById('videoPlayer');
  63. 		// 开始秒数
  64. 		let startM = (dateStrChangeTimeTamp('1970-01-02 ' + (data.startTime ? data.startTime : props
  65. 			.spliterStartTime)) - (1000 * 60 * 60 * 16)) / 1000
  66. 		// 结束秒数
  67. 		let endM = (dateStrChangeTimeTamp('1970-01-02 ' + (data.endTime ? data.endTime : props
  68. 			.spliterEndTime)) - (1000 * 60 * 60 * 16)) / 1000
  69. 		// 如果当前秒数小于等于截取的开始时间,就按截取的开始时间播放,如果不是,则为继续播放
  70. 		if (myVideo.currentTime <= startM || myVideo.currentTime > endM) {
  71. 			myVideo.currentTime = startM;
  72. 			myVideo.play();
  73. 		}
  74. 	}
  75. 	// 获取视频播放时长
  76. 	const getVideoTime = () => {
  77. 		if (document.getElementById('videoPlayer')) {
  78. 			let videoPlayer: videoRef = document.getElementById('videoPlayer');
  79. 			videoPlayer.addEventListener('timeupdate', function() {
  80. 				// 结束秒数
  81. 				let endM = (dateStrChangeTimeTamp('1970-01-02 ' + (data.endTime ? data.endTime : props
  82. 					.spliterEndTime)) - (1000 * 60 * 60 * 16)) / 1000
  83. 				// 如果当前播放时间大于等于截取的结束秒数,就暂停
  84. 				if (videoPlayer.currentTime >= endM) {
  85. 					videoPlayer.pause()
  86. 				}
  87. 			}, false)
  88. 		}
  89. 	}
  90. 	//设置播放点
  91. 	const playBySeconds = (num: number) => {
  92. 		if (num && document.getElementById('videoPlayer')) {
  93. 			let myVideo: videoRef = document.getElementById('videoPlayer');
  94. 			myVideo.currentTime = num;
  95. 		}
  96. 	}
  97. 	// 起始按钮
  98. 	const startMouseDown = (e) => {
  99. 		let odiv = e.currentTarget; //获取目标父元素
  100. 		//算出鼠标相对元素的位置
  101. 		let disX = e.clientX - odiv.offsetLeft;
  102. 		document.onmousemove = (e) => { //鼠标按下并移动的事件
  103. 			//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
  104. 			let left = e.clientX - disX;
  105.  
  106. 			//移动当前元素
  107. 			odiv.style.left = left + 'px';
  108. 			//获取距离窗口宽度
  109. 			let mas = odiv.offsetLeft;
  110. 			if (mas <= -(start.value.clientWidth / 2)) {
  111. 				odiv.style.left = -(start.value.clientWidth / 2) + 'px';
  112. 			} else if (mas >= (data.endLeft - Math.ceil(1000 / data.roal))) {
  113. 				odiv.style.left = (data.endLeft - Math.ceil(1000 / data.roal)) + 'px';
  114. 			}
  115. 			data.startTime = getNowTime(data.roal *  Math.floor(start.value.offsetLeft + (start.value.clientWidth /
  116. 				2)))
  117. 			data.startLeft = start.value.clientWidth + start.value.offsetLeft
  118. 			// 开始秒数
  119. 			let startM = (dateStrChangeTimeTamp('1970-01-02 ' + (data.startTime ? data.startTime : props
  120. 				.spliterStartTime)) - (1000 * 60 * 60 * 16)) / 1000
  121. 			playBySeconds(startM)
  122. 		};
  123. 		document.onmouseup = (e) => {
  124. 			document.onmousemove = null;
  125. 			document.onmouseup = null;
  126. 			handleTime()
  127. 		};
  128. 	}
  129. 	// 结束按钮
  130. 	const endMouseDown = (e) => {
  131. 		let odiv = e.currentTarget; //获取目标父元素
  132. 		//算出鼠标相对元素的位置
  133. 		let disX = e.clientX - odiv.offsetLeft;
  134. 		document.onmousemove = (e) => { //鼠标按下并移动的事件
  135. 			//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
  136. 			let left = e.clientX - disX;
  137.  
  138. 			//移动当前元素
  139. 			odiv.style.left = left + 'px';
  140. 			//获取距离窗口宽度
  141. 			let mas = odiv.offsetLeft;
  142. 			if (mas <= (data.startLeft - end.value.clientWidth + Math.ceil(1000 / data.roal))) {
  143. 				odiv.style.left = (data.startLeft - end.value.clientWidth + Math.ceil(1000 / data.roal)) +
  144. 					'px';
  145. 			} else if (mas >= data.endright) {
  146. 				odiv.style.left = data.endright + 'px';
  147. 			}
  148. 			data.endTime = getNowTime(data.roal *  Math.floor(end.value.offsetLeft + (end.value.clientWidth / 2)))
  149. 			data.endLeft = end.value.offsetLeft
  150. 		};
  151. 		document.onmouseup = (e) => {
  152. 			document.onmousemove = null;
  153. 			document.onmouseup = null;
  154. 			handleTime()
  155. 		};
  156. 	}
  157. 	// 传出起止时间的回调
  158. 	const handleTime = () => {
  159. 		let arr = [data.startTime, data.endTime]
  160. 		emit('queryTime', arr)
  161. 	}
  162. </script>

css部分

  1. <style scoped lang="scss">
  2. 	.video {
  3. 		width: 100%;
  4. 		margin-bottom: 0.2rem;
  5. 	}
  6.  
  7. 	.time-list {
  8. 		width: 100%;
  9. 		color: #C0C0C0;
  10. 		font-size: 0.12rem;
  11. 		margin-bottom: 0.1rem;
  12. 		display: flex;
  13. 		align-items: center;
  14. 		justify-content: space-between;
  15. 	}
  16.  
  17. 	.crop-filter {
  18. 		width: 100%;
  19. 		padding: 0 0.1rem;
  20. 		box-sizing: border-box;
  21. 		display: flex;
  22. 		align-items: center;
  23.  
  24. 		.timer-shaft {
  25. 			width: 100%;
  26. 			position: relative;
  27.  
  28. 			.circle {
  29. 				width: 0.2rem;
  30. 				position: absolute;
  31. 				top: -8%;
  32. 				height: 110%;
  33. 				background-color: #ffffff;
  34. 				cursor: e-resize;
  35. 				display: flex;
  36. 				align-items: center;
  37. 				justify-content: center;
  38.  
  39. 				.center {
  40. 					width: 0.02rem;
  41. 					height: 0.15rem;
  42. 					background-color: #D8D8D8;
  43. 				}
  44. 			}
  45.  
  46. 			.strat-circle {
  47. 				left: -0.09rem;
  48. 				border-radius: 0.03rem 0 0 0.03rem;
  49. 			}
  50.  
  51. 			.end-circle {
  52. 				right: -0.1rem;
  53. 				border-radius: 0 0.03rem 0.03rem 0;
  54. 			}
  55.  
  56. 			.white-shade {
  57. 				position: absolute;
  58. 				top: -8%;
  59. 				height: 110%;
  60. 				width: 100%;
  61. 				background-color: transparent;
  62. 				border: 0.04rem solid #fff;
  63. 				box-sizing: border-box;
  64. 				border-left: 0;
  65. 				border-right: 0;
  66. 			}
  67.  
  68. 			.left-shade {
  69. 				position: absolute;
  70. 				left: 0;
  71. 				top: 0;
  72. 				height: 100%;
  73. 				background: rgba(0, 0, 0, 0.6);
  74. 			}
  75.  
  76. 			.right-shade {
  77. 				position: absolute;
  78. 				right: 0;
  79. 				top: 0;
  80. 				height: 100%;
  81. 				background: rgba(0, 0, 0, 0.6);
  82. 			}
  83. 		}
  84. 	}
  85. </style>

.vue完整代码

  1. <template>
  2. 	<video id="videoPlayer" @play="onplay" controls="true" preload="auto" muted class="video" width="100%"
  3. 		:src="props.url"></video>
  4. 	<ul class="time-list">
  5. 		<li v-for="item in data.timeList" :key="item">{{item}}</li>
  6. 	</ul>
  7. 	<div class="crop-filter">
  8. 		<div class="timer-shaft" ref="shaft">
  9. 			<div class="white-shade" :style="{width:(data.endLeft-data.startLeft+12)+'px',left:data.startLeft-6+'px'}">
  10. 			</div>
  11. 			<div class="left-shade" :style="{width: (data.startLeft-6)+'px'}"></div>
  12. 			<div class="right-shade" :style="{width: (shaft?.clientWidth-data.endLeft-6) +'px'}"></div>
  13. 			<div class="strat-circle circle" ref="start" @mousedown="startMouseDown">
  14. 				<div class="center"></div>
  15. 			</div>
  16. 			<div class="end-circle circle" ref="end" @mousedown="endMouseDown">
  17. 				<div class="center"></div>
  18. 			</div>
  19. 			<!-- 此处src应绑定item -->
  20. 			<img @dragstart.prevent style="width: 5%;user-select: none;" v-for="item in props.photoList"
  21. 				src="../../../public/favicon.ico" alt="">
  22. 		</div>
  23. 	</div>
  24. </template>
  25. <!-- 起止时间间隔最小≈1秒 -->
  26. <script setup lang="ts">
  27. 	import {
  28. 		getNowTime,
  29. 		dateStrChangeTimeTamp,
  30. 		cropFilter,
  31. 		videoRef,
  32. 	} from '@/types/type'
  33. 	// 进度条dom
  34. 	const shaft = ref(null);
  35. 	// 开始按钮dom
  36. 	const start = ref(null);
  37. 	// 结束按钮dom
  38. 	const end = ref(null);
  39. 	const data = reactive(new cropFilter)
  40. 	// props参数类型
  41. 	interface Props {
  42. 		startTime ? : string;
  43. 		endTime: string;
  44. 		url: string;
  45. 		spliterStartTime ? : string;
  46. 		spliterEndTime: string;
  47. 		// 此处为模拟
  48. 		photoList: string[];
  49. 	}
  50. 	// 设置默认值,需要显式的开启,具体查看vue3文档
  51. 	const props = withDefaults(defineProps < Props > (), {
  52. 		startTime: '00:00:00.0',
  53. 		endTime: '00:00:08.0',
  54. 		spliterStartTime: '00:00:00.0',
  55. 		spliterEndTime: '00:00:08.0',
  56. 		url: '',
  57. 		photoList: [],
  58. 	})
  59. 	const emit = defineEmits(['queryTime'])
  60. 	onMounted(() => {
  61. 		// 随便拼一个1970年以后的年月日字符串+' '
  62. 		let str = '1970-01-02 '
  63. 		let time = dateStrChangeTimeTamp(str + props.endTime) - dateStrChangeTimeTamp(str + props.startTime)
  64. 		data.roal = time / shaft.value.clientWidth
  65. 		// 结束毫秒数
  66. 		let endM = (dateStrChangeTimeTamp('1970-01-02 ' + props?.spliterEndTime) - (1000 * 60 * 60 * 16))
  67. 		// 开始毫秒数
  68. 		let startM = (dateStrChangeTimeTamp('1970-01-02 ' + (props?.spliterStartTime)) - (1000 * 60 * 60 * 16))
  69. 		console.log(startM, endM)
  70. 		// 设置开始结束位置
  71. 		start.value.style.left = startM / data.roal - (end.value.clientWidth / 2) + 'px'
  72. 		end.value.style.left = endM / data.roal - (end.value.clientWidth / 2) + 'px'
  73.  
  74. 		data.endLeft = end.value.offsetLeft
  75. 		data.endright = shaft.value.clientWidth - (end.value.clientWidth / 2)
  76. 		data.startLeft = start.value.offsetLeft + (start.value.clientWidth / 2)
  77. 		getVideoTime()
  78. 		data.timeList.push(props.startTime)
  79. 		let paragraph = (dateStrChangeTimeTamp(str + props.endTime) - (1000 * 60 * 60 * 16)) / 5
  80. 		for (let i = 1; i < 6; i++) {
  81. 			data.timeList.push(getNowTime(paragraph * i))
  82. 		}
  83. 	})
  84. 	// 播放事件
  85. 	const onplay = () => {
  86. 		let myVideo: videoRef = document.getElementById('videoPlayer');
  87. 		// 开始秒数
  88. 		let startM = (dateStrChangeTimeTamp('1970-01-02 ' + (data.startTime ? data.startTime : props
  89. 			.spliterStartTime)) - (1000 * 60 * 60 * 16)) / 1000
  90. 		// 结束秒数
  91. 		let endM = (dateStrChangeTimeTamp('1970-01-02 ' + (data.endTime ? data.endTime : props
  92. 			.spliterEndTime)) - (1000 * 60 * 60 * 16)) / 1000
  93. 		// 如果当前秒数小于等于截取的开始时间,就按截取的开始时间播放,如果不是,则为继续播放
  94. 		if (myVideo.currentTime <= startM || myVideo.currentTime > endM) {
  95. 			myVideo.currentTime = startM;
  96. 			myVideo.play();
  97. 		}
  98. 	}
  99. 	// 获取视频播放时长
  100. 	const getVideoTime = () => {
  101. 		if (document.getElementById('videoPlayer')) {
  102. 			let videoPlayer: videoRef = document.getElementById('videoPlayer');
  103. 			videoPlayer.addEventListener('timeupdate', function() {
  104. 				// 结束秒数
  105. 				let endM = (dateStrChangeTimeTamp('1970-01-02 ' + (data.endTime ? data.endTime : props
  106. 					.spliterEndTime)) - (1000 * 60 * 60 * 16)) / 1000
  107. 				// 如果当前播放时间大于等于截取的结束秒数,就暂停
  108. 				if (videoPlayer.currentTime >= endM) {
  109. 					videoPlayer.pause()
  110. 				}
  111. 			}, false)
  112. 		}
  113. 	}
  114. 	//设置播放点
  115. 	const playBySeconds = (num: number) => {
  116. 		if (num && document.getElementById('videoPlayer')) {
  117. 			let myVideo: videoRef = document.getElementById('videoPlayer');
  118. 			myVideo.currentTime = num;
  119. 		}
  120. 	}
  121. 	// 起始按钮
  122. 	const startMouseDown = (e) => {
  123. 		let odiv = e.currentTarget; //获取目标父元素
  124. 		//算出鼠标相对元素的位置
  125. 		let disX = e.clientX - odiv.offsetLeft;
  126. 		document.onmousemove = (e) => { //鼠标按下并移动的事件
  127. 			//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
  128. 			let left = e.clientX - disX;
  129.  
  130. 			//移动当前元素
  131. 			odiv.style.left = left + 'px';
  132. 			//获取距离窗口宽度
  133. 			let mas = odiv.offsetLeft;
  134. 			if (mas <= -(start.value.clientWidth / 2)) {
  135. 				odiv.style.left = -(start.value.clientWidth / 2) + 'px';
  136. 			} else if (mas >= (data.endLeft - Math.ceil(1000 / data.roal))) {
  137. 				odiv.style.left = (data.endLeft - Math.ceil(1000 / data.roal)) + 'px';
  138. 			}
  139. 			data.startTime = getNowTime(data.roal *  Math.floor(start.value.offsetLeft + (start.value.clientWidth /
  140. 				2)))
  141. 			data.startLeft = start.value.clientWidth + start.value.offsetLeft
  142. 			// 开始秒数
  143. 			let startM = (dateStrChangeTimeTamp('1970-01-02 ' + (data.startTime ? data.startTime : props
  144. 				.spliterStartTime)) - (1000 * 60 * 60 * 16)) / 1000
  145. 			playBySeconds(startM)
  146. 		};
  147. 		document.onmouseup = (e) => {
  148. 			document.onmousemove = null;
  149. 			document.onmouseup = null;
  150. 			handleTime()
  151. 		};
  152. 	}
  153. 	// 结束按钮
  154. 	const endMouseDown = (e) => {
  155. 		let odiv = e.currentTarget; //获取目标父元素
  156. 		//算出鼠标相对元素的位置
  157. 		let disX = e.clientX - odiv.offsetLeft;
  158. 		document.onmousemove = (e) => { //鼠标按下并移动的事件
  159. 			//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
  160. 			let left = e.clientX - disX;
  161.  
  162. 			//移动当前元素
  163. 			odiv.style.left = left + 'px';
  164. 			//获取距离窗口宽度
  165. 			let mas = odiv.offsetLeft;
  166. 			if (mas <= (data.startLeft - end.value.clientWidth + Math.ceil(1000 / data.roal))) {
  167. 				odiv.style.left = (data.startLeft - end.value.clientWidth + Math.ceil(1000 / data.roal)) +
  168. 					'px';
  169. 			} else if (mas >= data.endright) {
  170. 				odiv.style.left = data.endright + 'px';
  171. 			}
  172. 			data.endTime = getNowTime(data.roal *  Math.floor(end.value.offsetLeft + (end.value.clientWidth / 2)))
  173. 			data.endLeft = end.value.offsetLeft
  174. 		};
  175. 		document.onmouseup = (e) => {
  176. 			document.onmousemove = null;
  177. 			document.onmouseup = null;
  178. 			handleTime()
  179. 		};
  180. 	}
  181. 	// 传出起止时间的回调
  182. 	const handleTime = () => {
  183. 		let arr = [data.startTime, data.endTime]
  184. 		emit('queryTime', arr)
  185. 	}
  186. </script>
  187.  
  188. <style scoped lang="scss">
  189. 	.video {
  190. 		width: 100%;
  191. 		margin-bottom: 0.2rem;
  192. 	}
  193.  
  194. 	.time-list {
  195. 		width: 100%;
  196. 		color: #C0C0C0;
  197. 		font-size: 0.12rem;
  198. 		margin-bottom: 0.1rem;
  199. 		display: flex;
  200. 		align-items: center;
  201. 		justify-content: space-between;
  202. 	}
  203.  
  204. 	.crop-filter {
  205. 		width: 100%;
  206. 		padding: 0 0.1rem;
  207. 		box-sizing: border-box;
  208. 		display: flex;
  209. 		align-items: center;
  210.  
  211. 		.timer-shaft {
  212. 			width: 100%;
  213. 			position: relative;
  214.  
  215. 			.circle {
  216. 				width: 0.2rem;
  217. 				position: absolute;
  218. 				top: -8%;
  219. 				height: 110%;
  220. 				background-color: #ffffff;
  221. 				cursor: e-resize;
  222. 				display: flex;
  223. 				align-items: center;
  224. 				justify-content: center;
  225.  
  226. 				.center {
  227. 					width: 0.02rem;
  228. 					height: 0.15rem;
  229. 					background-color: #D8D8D8;
  230. 				}
  231. 			}
  232.  
  233. 			.strat-circle {
  234. 				left: -0.09rem;
  235. 				border-radius: 0.03rem 0 0 0.03rem;
  236. 			}
  237.  
  238. 			.end-circle {
  239. 				right: -0.1rem;
  240. 				border-radius: 0 0.03rem 0.03rem 0;
  241. 			}
  242.  
  243. 			.white-shade {
  244. 				position: absolute;
  245. 				top: -8%;
  246. 				height: 110%;
  247. 				width: 100%;
  248. 				background-color: transparent;
  249. 				border: 0.04rem solid #fff;
  250. 				box-sizing: border-box;
  251. 				border-left: 0;
  252. 				border-right: 0;
  253. 			}
  254.  
  255. 			.left-shade {
  256. 				position: absolute;
  257. 				left: 0;
  258. 				top: 0;
  259. 				height: 100%;
  260. 				background: rgba(0, 0, 0, 0.6);
  261. 			}
  262.  
  263. 			.right-shade {
  264. 				position: absolute;
  265. 				right: 0;
  266. 				top: 0;
  267. 				height: 100%;
  268. 				background: rgba(0, 0, 0, 0.6);
  269. 			}
  270. 		}
  271. 	}
  272. </style>

type.ts代码

  1. export interface videoRef {
  2. 	// 其他冗余字段
  3. 	[propName: string]: any;
  4. 	// 数字值，表示当前播放的时间，以秒计
  5. 	currentTime: number;
  6. }
  7. export class cropFilter {
  8. 	// 结束按钮距离左侧距离
  9. 	endLeft: string | number = 0;
  10. 	// 结束按钮初始位置
  11. 	endright: string | number = 0;
  12. 	// 开始按钮距离左侧距离
  13. 	startLeft: string | number = 0;
  14. 	// 毫秒/px(1px===的毫秒数)
  15. 	roal: string | number = 0;
  16. 	// 开始时间
  17. 	startTime: string | number = 0;
  18. 	// 结束时间
  19. 	endTime: string | number = 0;
  20. 	// 时间轴显示时间数组
  21. 	timeList: string[] = [];
  22. }
  23.  
  24. //日期字符串转成时间戳
  25. export function dateStrChangeTimeTamp(dateStr: string) {
  26. 	dateStr = dateStr.substring(0, 23);
  27. 	dateStr = dateStr.replace(/-/g, '/');
  28. 	let timeTamp = new Date(dateStr).getTime();
  29. 	return timeTamp
  30. }
  31. // 精准到毫秒
  32. export function getNowTime(val: string | number) {
  33. 	const date = new Date(val)
  34. 	const hour = (date.getHours() - 8) < 10 ? '0' + (date.getHours() - 8) : date.getHours() - 8
  35. 	const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  36. 	const second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  37. 	const milliSeconds = date.getMilliseconds() //毫秒
  38. 	const currentTime = hour + ':' + minute + ':' + second + '.' + milliSeconds
  39. 	console.log(currentTime)
  40. 	return currentTime
  41. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/130221
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号