Fix：多视频只能播放一个

pages/town/components/information.vue

@@ -29,7 +29,15 @@
             />
           </view>
           <view class="info-item-body" v-if="item.contentType === 2">
-            <video play-btn-position="center" :show-fullscreen-btn="false" class="kd-cover v12-mt-0" :src="item.images[0]" controls autoplay :poster="item.images[0] + '?vframe/jpg/offset/1'"></video>
+            <video 
+              @play="infoItemViewClick(item, index)"
+              play-btn-position="center" 
+              :show-fullscreen-btn="false" 
+              class="kd-cover v12-mt-0" 
+              :src="item.images[0]" 
+              controls 
+              :id="'video-item' + index"
+              :poster="item.images[0] + '?vframe/jpg/offset/1'"></video>
           </view>
           <view class="info-item-bottom">
             <view class="time">
@@ -83,7 +91,8 @@ export default {
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
-      actives: this.infoArray
+      actives: this.infoArray,
+      videoPlayers: []
     }
   },
   watch: {
@@ -92,7 +101,27 @@ export default {
     }
   },
   methods: {
-    infoItemViewClick(item) {
+    infoItemViewClick(item, index) {
+      if(item.contentType === 2) {
+        // const coverCtx = uni.createVideoContext('coverVideo', this)
+        // coverCtx.pause()
+        const playerId = 'video-item' + index
+        if(this.videoPlayers.includes(playerId)) {
+          this.videoPlayers.forEach(player => {
+            if(player === playerId) return
+            const playerCtx = uni.createVideoContext(player, this)
+            playerCtx.pause()
+          })
+        } {
+          this.videoPlayers.push(playerId)
+          this.videoPlayers.forEach(player => {
+            if(player === playerId) return
+            const playerCtx = uni.createVideoContext(player, this)
+            playerCtx.pause()
+          })
+        }
+        this.$emit('video')
+      }
       uni.$u.debounce(() => {
         watchTownActive({ id: item.id }).finally(() => {
           this.actives.forEach(info => {

pages/town/index.vue

@@ -5,6 +5,7 @@
       <image v-if="townInfo.coverType === 1" :src="townInfo.cover" mode="scaleToFill" class="img"></image>
       <video 
         v-if="townInfo.coverType === 2"
+        id="videoCover"
         class="img" 
         :src="townInfo.cover"  
         autoplay
@@ -40,7 +41,7 @@
           <culture :list="townInfo.cultureInfo.cultureImages"></culture>
         </view>
         <view v-if="actived === 3">
-          <information :infoArray="activeties"></information>
+          <information :infoArray="activeties" @video="handleVideo"></information>
         </view>
         <view v-if="actived === 4">
           <service :info="{...townInfo.serviceInfo, name:  townInfo.name}"></service>
@@ -115,6 +116,10 @@ export default {
     this.getActive()
   },
   methods: {
+    handleVideo() {
+      const videoCtx = uni.createVideoContext('videoCover', this)
+      videoCtx.pause()
+    },
     shareImg() {
       uni.showLoading()
       shareTown(this.id).then(res => {