diff --git a/pkg_product/views/experienceProjectDetail.vue b/pkg_product/views/experienceProjectDetail.vue
index c820234..5751ebb 100644
--- a/pkg_product/views/experienceProjectDetail.vue
+++ b/pkg_product/views/experienceProjectDetail.vue
@@ -10,9 +10,9 @@
     />
     <scroll-view scroll-y class="page-scroll">
       <view class="hero-wrap">
-        <swiper v-if="bannerList.length > 0 || project.video" class="hero-img" circular autoplay @change="handleSwiperChange">
+        <swiper v-if="bannerList.length > 0 || project.video" class="hero-img" circular :autoplay="swiperAutoplay" :interval="3000" @change="handleSwiperChange">
           <swiper-item v-if="project.video">
-            <video :src="project.video" id="hero-video" class="hero-img" :autoplay="currentSwiperIndex === 0" loop muted object-fit="cover" :show-play-btn="false" :controls="false" :enable-progress-gesture="false"></video>
+            <video :src="project.video" id="hero-video" class="hero-img" :autoplay="currentSwiperIndex === 0" loop muted object-fit="cover" :controls="false" :enable-progress-gesture="false" @play="onVideoPlay" @ended="onVideoEnd" @pause="onVideoEnd" @click="toggleVideo"></video>
           </swiper-item>
           <swiper-item v-for="(item, index) in bannerList" :key="index">
             <image :src="item" class="hero-img" mode="aspectFill" />
@@ -167,6 +167,8 @@ export default {
       usageNotice: '',
       currentSwiperIndex: 0,
       videoContext: null,
+      swiperAutoplay: true,
+      isVideoPlaying: false,
       projectList: []
     }
   },
@@ -226,6 +228,23 @@ export default {
         }
       }
     },
+    onVideoPlay() {
+      this.swiperAutoplay = false
+      this.isVideoPlaying = true
+    },
+    onVideoEnd() {
+      this.swiperAutoplay = true
+      this.isVideoPlaying = false
+    },
+    toggleVideo() {
+      if (!this.videoContext) return
+      if (this.isVideoPlaying) {
+        this.videoContext.pause()
+        this.swiperAutoplay = true
+      } else {
+        this.videoContext.play()
+      }
+    },
     fetchProjectDetail() {
       if (!this.experienceMerchantId) {
         return