动画完成之后 再自动播放

src/views/Screen/BaseView.vue

@@ -157,10 +157,10 @@ const contextmenus = (): ContextmenuItem[] => {
       handler: () => setLoopPlay(!loopPlay.value)
     },
     { divider: true },
-    {
-      text: "显示工具栏",
-      handler: () => (rightToolsVisible.value = true)
-    },
+    // {
+    //   text: "显示工具栏",
+    //   handler: () => (rightToolsVisible.value = true)
+    // },
     {
       text: "查看所有幻灯片",
       handler: () => (slideThumbnailModelVisible.value = true)

src/views/Screen/ScreenElement.vue

@@ -13,7 +13,7 @@
     :title="elementInfo.link?.target || ''"
     @click="$event => openLink($event)"
   >
-    <component :is="currentElementComponent" :elementInfo="elementInfo"></component>
+    <component :is="currentElementComponent" :needWaitAnimation="needWaitAnimation" :elementInfo="elementInfo" />
   </div>
 </template>
 

src/views/components/element/AudioElement/AudioPlayer.vue

@@ -4,7 +4,6 @@
       class="audio"
       ref="audioRef"
       :src="src"
-      :autoplay="autoplay"
       @durationchange="handleDurationchange()"
       @timeupdate="handleTimeupdate()"
       @play="handlePlayed()"
@@ -70,7 +69,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"
 import message from "@/utils/message"
 
 const props = withDefaults(
@@ -79,6 +78,7 @@ const props = withDefaults(
     loop: boolean
     autoplay?: boolean
     scale?: number
+    needWaitAnimation?: boolean
   }>(),
   {
     autoplay: false,
@@ -86,6 +86,19 @@ const props = withDefaults(
   }
 )
 
+watch(
+  () => props.needWaitAnimation,
+  () => {
+    if (props.autoplay) {
+      if (!props.needWaitAnimation) {
+        play()
+      } else {
+        pause()
+      }
+    }
+  }
+)
+
 const secondToTime = (second = 0) => {
   if (second === 0 || isNaN(second)) return "00:00"
 

src/views/components/element/AudioElement/ScreenAudioElement.vue

@@ -27,6 +27,7 @@
           :loop="elementInfo.loop"
           :autoplay="elementInfo.autoplay"
           :scale="scale"
+          :needWaitAnimation="needWaitAnimation"
         />
       </div>
     </div>
@@ -44,6 +45,7 @@ import AudioPlayer from "./AudioPlayer.vue"
 
 const props = defineProps<{
   elementInfo: PPTAudioElement
+  needWaitAnimation: boolean
 }>()
 
 const { viewportRatio, currentSlide, viewportSize } = storeToRefs(useSlidesStore())

src/views/components/element/VideoElement/ScreenVideoElement.vue

@@ -1,25 +1,24 @@
 <template>
-  <div class="base-element-video screen-element-video"
+  <div
+    class="base-element-video screen-element-video"
     :style="{
       top: elementInfo.top + 'px',
       left: elementInfo.left + 'px',
       width: elementInfo.width + 'px',
-      height: elementInfo.height + 'px',
+      height: elementInfo.height + 'px'
     }"
   >
-    <div
-      class="rotate-wrapper"
-      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
-    >
+    <div class="rotate-wrapper" :style="{ transform: `rotate(${elementInfo.rotate}deg)` }">
       <div class="element-content">
         <VideoPlayer
           v-if="inCurrentSlide"
           :width="elementInfo.width"
           :height="elementInfo.height"
-          :src="elementInfo.src" 
-          :poster="elementInfo.poster"  
+          :src="elementInfo.src"
+          :poster="elementInfo.poster"
           :autoplay="elementInfo.autoplay"
-          :scale="scale" 
+          :scale="scale"
+          :needWaitAnimation="needWaitAnimation"
         />
       </div>
     </div>
@@ -27,22 +26,23 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useSlidesStore } from '@/store'
-import type { PPTVideoElement } from '@/types/slides'
-import { injectKeySlideId, injectKeySlideScale } from '@/types/injectKey'
+import { computed, inject, ref } from "vue"
+import { storeToRefs } from "pinia"
+import { useSlidesStore } from "@/store"
+import type { PPTVideoElement } from "@/types/slides"
+import { injectKeySlideId, injectKeySlideScale } from "@/types/injectKey"
 
-import VideoPlayer from './VideoPlayer/index.vue'
+import VideoPlayer from "./VideoPlayer/index.vue"
 
 defineProps<{
   elementInfo: PPTVideoElement
+  needWaitAnimation: boolean
 }>()
 
 const { currentSlide } = storeToRefs(useSlidesStore())
 
 const scale = inject(injectKeySlideScale) || ref(1)
-const slideId = inject(injectKeySlideId) || ref('')
+const slideId = inject(injectKeySlideId) || ref("")
 
 const inCurrentSlide = computed(() => currentSlide.value.id === slideId.value)
 </script>

src/views/components/element/VideoElement/VideoPlayer/index.vue

@@ -17,7 +17,6 @@
         class="video"
         ref="videoRef"
         :src="src"
-        :autoplay="autoplay"
         :poster="poster"
         webkit-playsinline
         playsinline
@@ -26,8 +25,10 @@
         @ended="handleEnded()"
         @progress="handleProgress()"
         @play="
-          autoHideController()
-          paused = false
+          () => {
+            autoHideController()
+            paused = false
+          }
         "
         @pause="autoHideController()"
         @error="handleError()"
@@ -121,7 +122,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"
 import useMSE from "./useMSE"
 
 const props = withDefaults(
@@ -132,6 +133,7 @@ const props = withDefaults(
     poster?: string
     autoplay?: boolean
     scale?: number
+    needWaitAnimation?: boolean
   }>(),
   {
     poster: "",
@@ -140,6 +142,19 @@ const props = withDefaults(
   }
 )
 
+watch(
+  () => props.needWaitAnimation,
+  () => {
+    if (props.autoplay) {
+      if (!props.needWaitAnimation) {
+        play()
+      } else {
+        pause()
+      }
+    }
+  }
+)
+
 const secondToTime = (second = 0) => {
   if (second === 0 || isNaN(second)) return "00:00"