this.isCropping = false
this.$emit('play', this.playingItem.startTime || 0)
}
这里控制了开始播放，那么如何让媒体播到裁剪结束时间的时候自动停止呢？
监听媒体的
timeupdate 事件并实时对比媒体的
currentTime 与
playingItem 的
endTime ，达到的时候就发出
pause 事件通知媒体暂停。
if (currentTime >= playingItem.endTime) {
this.pause()
}至此，键盘输入的裁剪列表基本完成，下面介绍鼠标拖拽输入。
第二步
下面介绍如何通过鼠标点击与拖拽输入。
1、确定鼠标交互逻辑
新增裁剪
鼠标在拖拽区点击后，新增一条裁剪数据，开始时间与结束时间均为
mouseup 时进度条的时间，并让结束时间戳跟随鼠标移动，进入编辑状态。确认时间戳
编辑状态，鼠标移动时，时间戳根据鼠标在进度条的当前位置来随动，鼠标再次点击后确认当前时间，并终止时间戳跟随鼠标移动。
更改时间
非编辑状态，鼠标在进度条上移动时，监听
mousemove 事件，在接近任意一条裁剪数据的开始或结束时间戳时高亮当前数据并显示时间戳。鼠标
mousedown 后选中时间戳并开始拖拽更改时间数据。
mouseup 后结束更改。2、确定需要监听的鼠标事件
鼠标在进度条区域需要监听三个事件:
mousedown 、
mousemove 、
mouseup 。 在进度条区存在多种元素，简单可分成三类： 鼠标移动时随动的时间戳
存在裁剪片段时的开始时间戳、结束时间戳、浅蓝色的时间遮罩
进度条本身
首先
mousedown 和
mouseup 的监听当然是绑定在进度条本身。
this.timeLineContainer.addEventListener('mousedown', e => {
const currentCursorOffsetX = e.clientX - containerLeft
lastMouseDownOffsetX = currentCursorOffsetX
// 检测是否点到了时间戳
this.timeIndicatorCheck(currentCursorOffsetX, 'mousedown')
})this.timeLineContainer.addEventListener('mouseup', e => {
// 已经处于裁剪状态时，鼠标抬起，则裁剪状态取消
if (this.isCropping) {
