视频播放监听

src/components/videoCutter/videoControl.vue

@@ -2,7 +2,7 @@
     <div class="video-control">
         <div class="video-play-btn" @click="play()">播放</div>
         <div class="video-time-content">
-            <div class="now-time">{{ duration | formatTime }}</div>
+            <div class="now-time">{{ nowTime | formatTime }}</div>
             <span>/</span>
             <div class="total-time">{{ duration | formatTime }}</div>
         </div>

src/components/videoCutter/videoPlayer.vue

@@ -28,6 +28,9 @@ export default {
             this.$refs.videoDom.addEventListener('ended', () => {
                 this.$emit('ended')
             })
+            this.$refs.videoDom.addEventListener('timeupdate', () => {
+                this.$emit('timeupdate', this.$refs.videoDom.currentTime)
+            })
         })
     },
     methods: {
@@ -39,7 +42,6 @@ export default {
         play() {
             if (!this.canPlay) return
             this.$refs.videoDom.play()
-            this.$emit('currentTime', this.$refs.videoDom.currentTime)
         },
         pause() {
             if (!this.canPlay) return

src/views/videoCutter.vue

 <template>
     <div class="video-cutter">
         <div class="video-content">
-            <VideoPlayer @currentTime="changeTime" @end="playEnd" />
+            <VideoPlayer @currentTime="changeTime" @end="playEnd" @timeupdate="timeupdate" />
         </div>
         <div class="video-btn">
             <videoChange @changeVideo="changeVideo" />
@@ -14,15 +14,11 @@
 </template>
 
 <script>
-import VideoPlayer from '@/components/videoCutter/videoPlayer.vue'
-import VideoChange from '@/components/videoCutter/videoChange.vue'
-import VideoControl from '@/components/videoCutter/videoControl.vue'
-
 export default {
     components: {
-        VideoPlayer,
-        VideoChange,
-        VideoControl
+        VideoPlayer: () => import('@/components/videoCutter/videoPlayer.vue'),
+        VideoChange: () => import('@/components/videoCutter/videoChange.vue'),
+        VideoControl: () => import('@/components/videoCutter/videoControl.vue')
     },
     name: 'videoCutter',
     data() {
@@ -66,6 +62,9 @@ export default {
         playEnd() {
             this.playing = false
             this.nowTime = this.duration
+        },
+        timeupdate(time) {
+            this.nowTime = time
         }
     }
 }