用户使用的时候小手一抖，多点了一下 添加 按钮，或者有帕金森，怎么都拖不准，就可能会有数据一样或存在重合部分的裁剪片段。那么我们就得过滤掉重复和存在重合部分的裁剪。
还是直接看代码方便
/** * cropItemList排序并去重 */ cleanCropItemList () { let cropItemList = this.cropItemList // 1. 依据startTime由小到大排序 cropItemList = cropItemList.sort(function (item1, item2) { return item1.startTime - item2.startTime }) let tempCropItemList = [] let startTime = cropItemList[0].startTime let endTime = cropItemList[0].endTime const lastIndex = cropItemList.length - 1 // 遍历，删除重复片段 cropItemList.forEach((item, index) => { // 遍历到最后一项，直接写入 if (lastIndex === index) { tempCropItemList.push({ startTime: startTime, endTime: endTime, startTimeArr: formatTime.getFormatTimeArr(startTime), endTimeArr: formatTime.getFormatTimeArr(endTime), }) return } // currentItem片段包含item if (item.endTime <= endTime && item.startTime >= startTime) { return } // currentItem片段与item有重叠 if (item.startTime <= endTime && item.endTime >= endTime) { endTime = item.endTime return } // currentItem片段与item无重叠,向列表添加一项，更新记录参数 if (item.startTime > endTime) { tempCropItemList.push({ startTime: startTime, endTime: endTime, startTimeArr: formatTime.getFormatTimeArr(startTime), endTimeArr: formatTime.getFormatTimeArr(endTime), }) // 标志量移到当前item startTime = item.startTime endTime = item.endTime } }) return tempCropItemList }
第四步
使用裁剪工具： 通过props及emit事件实现媒体与裁剪工具之间的通信。
<template> <div> <video ref="video" src="https://pan.prprpr.me/?/dplayer/hikarunara.mp4" controls> </video> <CropTool :duration="duration" :playing="playing" :currentPlayingTime="currentTime" @play="playVideo" @pause="pauseVideo" @stop="stopVideo"/> </div> </template> <script> import CropTool from './components/CropTool.vue' export default { name: 'app', components: { CropTool, }, data () { return { duration: 0, playing: false, currentTime: 0, } }, mounted () { const videoElement = this.$refs.video videoElement.ondurationchange = () => { this.duration = videoElement.duration } videoElement.onplaying = () => { this.playing = true } videoElement.onpause = () => { this.playing = false } videoElement.ontimeupdate = () => { this.currentTime = videoElement.currentTime } }, methods: { seekVideo (seekTime) { this.$refs.video.currentTime = seekTime }, playVideo (time) { this.seekVideo(time) this.$refs.video.play() }, pauseVideo () { this.$refs.video.pause() }, stopVideo () { this.$refs.video.pause() this.$refs.video.currentTime = 0 }, }, } </script>
总结
写博客比写代码难多了，感觉很混乱的写完了这个博客。
几个小细节 列表增删时的高度动画
UI提了个需求，最多展示10条裁剪片段，超过了之后就滚动，还得有增删动画。本来以为直接设个 max-height 完事，结果发现
CSS的 transition 动画只有针对绝对值的height有效 ，这就有点小麻烦，因为裁剪条数是变化的，那么高度也是在变化的。设绝对值该怎么办呢。。。
这里通过HTML中tag的 attribute 属性 data-count 来告诉CSS我现在有几条裁剪，然后让CSS根据 data-count 来设置列表高度。
<!--超过10条数据也只传10，让列表滚动--> <div :data-count="listLength > 10 ? 10 : listLength -1"> </div>