feat: 处理视频播放

src/App.vue

@@ -20,10 +20,15 @@ export default {
   },
   created(){
     EventBus.$on('preview', this.handlePreview);
+    EventBus.$on('playVideo', this.handleVideoPlay);
   },
   methods: {
+    handleVideoPlay(e){
+      document.querySelectorAll('video').forEach(video => {
+        if(e.target !== video && !video.paused) video.pause();
+      })
+    },
     handlePreview(url){
-      console.log('preview');
       const { data } = this.$store.state.pages;
       const { pages, main } = data;
       const { id = 'main' } = this.$route.params;

src/components/video.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="video-wrapper mb-4 last:mb-0">
     <component v-if="options.title" :is="getComponent(options.title)" :options="options.title"></component>
-    <video webkit-playsinline playsinline x-webkit-airplay x5-playsinline preload="preload" :poster="options.poster" controls :src="options.video"></video>
+    <video @play="handlePlay" webkit-playsinline playsinline x-webkit-airplay x5-playsinline preload="preload" :poster="options.poster" controls :src="options.video"></video>
   </div>
 </template>
 <script>
 import Base from './base';
+import EventBus from '@/utils/eventBus.js';
 
 export default {
   name: 'v-video',
   extends: Base,
+  methods: {
+    handlePlay(e){
+      EventBus.$emit('playVideo', e);
+    }
+  }
 }
 </script>
 <style lang="less">