cutter组件拆解

src/components/videoCutter/videoChange.vue

+<template>
+    <div class="video-change" @click="changeVideo">
+        替换视频
+    </div>
+</template>
+<script>
+export default {
+    methods: {
+        changeVideo() {
+            this.$emit('changeVideo')
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.video-change {
+    width: 100px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    border: 1px solid #dddddd;
+    border-radius: 4px;
+    user-select: none;
+    cursor: pointer;
+}
+</style>

src/components/videoCutter/videoControl.vue

+<template>
+    <div class="video-control">
+        <div class="video-play-btn" @click="play()">播放</div>
+        <div class="video-time-content">
+            <div class="now-time">{{ duration | formatTime }}</div>
+            <span>/</span>
+            <div class="total-time">{{ duration | formatTime }}</div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {}
+    },
+    props: ['duration', 'nowTime'],
+    methods: {
+        play() {
+            this.$emit('play')
+        }
+    },
+    filters: {
+        formatTime(duration) {
+            if (duration <= 0) return '00:00'
+            if (!duration) return '--:--'
+            let min = ~~(duration / 60)
+            min = (min + '').length === 1 ? '0' + min : min
+            let sec = Math.floor(duration % 60)
+            sec = (sec + '').length === 1 ? '0' + sec : sec
+            min = min || '00'
+            sec = sec || '00'
+            return min + ':' + sec
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.video-control {
+    display: flex;
+    justify-content: flex-start;
+    align-self: center;
+    width: 200px;
+    user-select: none;
+}
+.video-play-btn {
+    border: 1px solid #dddddd;
+    width: 30px;
+    height: 30px;
+    border-radius: 100%;
+    margin-right: 10px;
+    cursor: pointer;
+}
+.video-time-content {
+    display: flex;
+
+    > div,
+    span {
+        line-height: 30px;
+        color: #474261;
+    }
+}
+</style>

src/components/videoCutter/videoPlayer.vue

@@ -14,20 +14,45 @@ export default {
     },
     mounted() {
         this.$bus.on('videoPlayer.play', (data) => {
-            console.log(data)
-            // if(data.state)
+            if (data.time !== undefined) {
+                this.currentTime(data.time)
+            }
+            if (data.play) {
+                this.play()
+            } else {
+                this.pause()
+            }
         })
         this.$nextTick(() => {
-            this.$refs.videoDom.addEventListener('canplay', () => {
-                this.canPlay = true
+            this.$refs.videoDom.addEventListener('canplay', this.canPlayFunc)
+            this.$refs.videoDom.addEventListener('ended', () => {
+                this.$emit('ended')
             })
         })
     },
     methods: {
+        canPlayFunc() {
+            this.canPlay = true
+            let from = this.$parent.$options.name || 'videoPlayer'
+            this.$bus.emit(`${from}.canPlay`, this.$refs.videoDom.duration)
+        },
         play() {
             if (!this.canPlay) return
             this.$refs.videoDom.play()
+            this.$emit('currentTime', this.$refs.videoDom.currentTime)
+        },
+        pause() {
+            if (!this.canPlay) return
+            this.$refs.videoDom.pause()
+        },
+        currentTime(time) {
+            if (!this.canPlay) return
+            this.$refs.videoDom.currentTime = time
         }
+    },
+    beforeDestroy() {
+        this.$refs.videoDom.removeEventListener('canplay')
+        this.$refs.videoDom.removeEventListener('ended')
     }
 }
 </script>

src/views/videoCutter.vue

 <template>
     <div class="video-cutter">
         <div class="video-content">
-            <video-player></video-player>
+            <VideoPlayer @currentTime="changeTime" @end="playEnd" />
+        </div>
+        <div class="video-btn">
+            <videoChange @changeVideo="changeVideo" />
+            <videoControl :duration="duration" :nowTime="nowTime" @play="videoPlay" />
+            <div></div>
         </div>
-        <div></div>
         <div></div>
         <div></div>
     </div>
@@ -11,17 +15,59 @@
 
 <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
+        VideoPlayer,
+        VideoChange,
+        VideoControl
     },
+    name: 'videoCutter',
     data() {
         return {
-            name: ''
+            name: '',
+            nowTime: 0,
+            duration: 0,
+            playing: false,
+            canPlay: false
         }
     },
     created() {},
-    mounted() {}
+    mounted() {
+        this.$bus.on('videoCutter.canPlay', this.canPlayFunc)
+    },
+    methods: {
+        changeVideo() {
+            console.log('todo change video, <-----lilei')
+        },
+        canPlayFunc(data) {
+            this.duration = data
+            this.canPlay = true
+        },
+        videoPlay() {
+            if (!this.canPlay) return
+            let ob = {}
+            if (this.playing) {
+                ob.play = false
+            } else {
+                ob.play = true
+                if (this.nowTime >= this.duration) {
+                    ob.time = 0
+                }
+            }
+            this.playing = !this.playing
+            this.$bus.emit('videoPlayer.play', ob)
+        },
+        changeTime(data) {
+            console.log(data)
+        },
+        playEnd() {
+            this.playing = false
+            this.nowTime = this.duration
+        }
+    }
 }
 </script>
 
@@ -35,4 +81,8 @@ export default {
     width: 100%;
     height: 700px;
 }
+.video-btn {
+    display: flex;
+    justify-content: space-between;
+}
 </style>