timeline

src/components/videoCutter/videoTimeline.vue

+<template>
+  <div class="video-timeline">
+    <div
+      ref="sliderWidth"
+      v-drag
+      class="time-slider"
+    >
+      <div class="time-slider-rail"></div>
+      <div
+        class="time-slider-track"
+        :style="{ width: ((info.val - info.min) / info.max) * 100 + '%' }"
+      ></div>
+      <div
+        data-action="handle"
+        class="time-slider-handle"
+        :style="{ left: ((info.val - info.min) / info.max) * 100 + '%' }"
+      ></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'VideoTimeline',
+  directives: {
+    drag(el, binding, vnode) {
+      let _this = vnode.context,
+        mousemove = null,
+        mouseup = null,
+        dataAction = ''
+
+      mousemove = (e) => {
+        _this.dragMove && _this.dragMove(e.pageX, dataAction, e)
+      }
+
+      mouseup = (e) => {
+        document.removeEventListener('mousemove', mousemove)
+        document.removeEventListener('mouseup', mouseup)
+
+        _this.dragUp && _this.dragUp(e.pageX, dataAction, e)
+      }
+
+      el.onmousedown = (e) => {
+        dataAction = e.target.dataset.action
+
+        if (e.which === 3 || e.which === 2) {
+          e.stopPropagation()
+          return
+        }
+
+        document.addEventListener('mousemove', mousemove)
+        document.addEventListener('mouseup', mouseup)
+
+        _this.dragDown && _this.dragDown(e.pageX, dataAction, e)
+      }
+    }
+  },
+  props: {
+    info: {
+      type: Object,
+      required: true,
+      default: function() {
+        return { step: 0.1, min: 0, max: 10, val: 0, cut: [0, 10] }
+      }
+    }
+  },
+  data() {
+    return {
+      width: 100
+    }
+  },
+  methods: {
+    dragDown(dis, action) {
+      if (!action) return
+      this.width = this.$refs.sliderWidth.clientWidth
+      this.action = action
+      this.dragHand = true
+      this.mpos = {
+        x: dis,
+        v: this.info.val
+      }
+      this.$emit('changeData', { val: this.mpos.v, action: action, type: 'start' })
+    },
+    dragMove(pos) {
+      if (!this.action) return
+      let val = 0
+      console.log(pos, '<_-------------')
+      // let pre = Math.round(((pos.x - this.mpos.x) / 120 * this.item.len + this.mpos.v) / this.item.step) / (1 / this.item.step);
+      // this.item.val = pre > this.item.max ? this.item.max : pre < this.item.min ? this.item.min : pre;
+      this.$emit('changeData', { val: val, action: this.action, type: 'change' })
+    },
+    dragUp() {
+      if (!this.action) return
+      let val = 0
+      this.mpos = null
+      this.dragHand = false
+      this.action = ''
+      this.$emit('changeData', { val: val, action: this.action, type: 'end' })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.video-timeline {
+  width: 100%;
+  height: 50px;
+  background-color: beige;
+}
+.time-slider {
+  position: relative;
+  height: 15px;
+  padding: 5px 0;
+  width: 100%;
+  margin-right: 1px;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  * {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .time-slider-rail {
+    position: absolute;
+    width: 100%;
+    background-color: #d9ddea;
+    height: 4px;
+    border-radius: 3px;
+  }
+
+  .time-slider-track {
+    position: absolute;
+    background-color: #737596;
+    border-radius: 3px;
+    height: 4px;
+    left: 0%;
+    width: 69.1515%;
+  }
+
+  .time-slider-handle {
+    position: absolute;
+    margin-left: -6px;
+    margin-top: -4px;
+    left: 69.1515%;
+    width: 12px;
+    height: 12px;
+    background-color: #737596;
+    cursor: -webkit-grab;
+    cursor: grab;
+    border-radius: 50%;
+    -ms-touch-action: pan-x;
+    touch-action: pan-x;
+  }
+}
+</style>

src/views/videoCutter.vue

 <template>
   <div class="video-cutter">
     <div class="video-content">
-      <VideoPlayer
+      <videoPlayer
         @currentTime="changeTime"
         @end="playEnd"
         @timeupdate="timeupdate"
-      ></VideoPlayer>
+      ></videoPlayer>
     </div>
     <div class="video-btn">
       <videoChange @changeVideo="changeVideo"></videoChange>
@@ -14,9 +14,18 @@
         :now-time="nowTime"
         @play="videoPlay"
       ></videoControl>
-      <div></div>
+      <div class="video-water">
+        <input
+          id="cutterRemoveWater"
+          v-model="noWater"
+          type="checkbox"
+        >
+        <label for="cutterRemoveWater">去除水印</label>
+      </div>
+    </div>
+    <div class="timeline-content">
+      <videoTimeline :info="timelineObj"></videoTimeline>
     </div>
-    <div></div>
     <div></div>
   </div>
 </template>
@@ -27,7 +36,8 @@ export default {
   components: {
     VideoPlayer: () => import('@/components/videoCutter/videoPlayer.vue'),
     VideoChange: () => import('@/components/videoCutter/videoChange.vue'),
-    VideoControl: () => import('@/components/videoCutter/videoControl.vue')
+    VideoControl: () => import('@/components/videoCutter/videoControl.vue'),
+    VideoTimeline: () => import('@/components/videoCutter/videoTimeline.vue')
   },
   data() {
     return {
@@ -35,7 +45,9 @@ export default {
       nowTime: 0,
       duration: 0,
       playing: false,
-      canPlay: false
+      canPlay: false,
+      noWater: true,
+      timelineObj: { step: 0.1, min: 0, max: 10, val: 0 }
     }
   },
   created() {},
@@ -48,6 +60,7 @@ export default {
     },
     canPlayFunc(data) {
       this.duration = data
+      this.timelineObj.max = this.duration
       this.canPlay = true
     },
     videoPlay() {
@@ -59,6 +72,7 @@ export default {
         ob.play = true
         if (this.nowTime >= this.duration) {
           ob.time = 0
+          this.timelineObj.val = 0
         }
       }
       this.playing = !this.playing
@@ -70,9 +84,11 @@ export default {
     playEnd() {
       this.playing = false
       this.nowTime = this.duration
+      this.timelineObj.val = this.nowTime
     },
     timeupdate(time) {
       this.nowTime = time
+      this.timelineObj.val = this.nowTime
     }
   }
 }
@@ -92,4 +108,21 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+.video-water {
+  display: flex;
+  align-items: center;
+
+  input {
+    margin-right: 4px;
+  }
+
+  * {
+    cursor: pointer;
+  }
+}
+.timeline-content {
+  width: 100%;
+  margin: 10px 0;
+  padding: 0 20px;
+}
 </style>