添加vue-bus组件

package.json

@@ -34,6 +34,7 @@
     "core-js": "^3.6.5",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
+    "vue-bus": "^1.2.1",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },

src/components/videoCutter/videoPlayer.vue

 <template>
     <div class="video-player">
-        <video></video>
+        <video ref="videoDom" src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"></video>
     </div>
 </template>
 <script>
 export default {
     data() {
-        return {}
+        return {
+            state: 'pluse',
+            times: 0,
+            canPlay: false
+        }
+    },
+    mounted() {
+        this.$bus.on('videoPlayer.play', (data) => {
+            console.log(data)
+            // if(data.state)
+        })
+        this.$nextTick(() => {
+            this.$refs.videoDom.addEventListener('canplay', () => {
+                this.canPlay = true
+            })
+        })
+    },
+    methods: {
+        play() {
+            if (!this.canPlay) return
+            this.$refs.videoDom.play()
+        }
     }
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.video-player {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: beige;
+
+    video {
+        max-width: 100%;
+        max-height: 100%;
+    }
+}
+</style>

src/main.js

@@ -5,6 +5,9 @@ import store from './store'
 import './registerServiceWorker'
 import './assets/style/index.scss'
 import axios from 'axios'
+import VueBus from 'vue-bus'
+
+Vue.use(VueBus)
 
 import baseURL from '../config/baseUrl.js'
 console.log('baseURL:', baseURL)

src/views/videoCutter.vue

@@ -31,4 +31,8 @@ export default {
     width: 100%;
     height: 100%;
 }
+.video-content {
+    width: 100%;
+    height: 700px;
+}
 </style>