feat: 添加视频自动播放配置（#223）

src/hooks/useCreateElement.ts

@@ -305,6 +305,7 @@ export default () => {
       left: (VIEWPORT_SIZE - 500) / 2,
       top: (VIEWPORT_SIZE * viewportRatio.value - 300) / 2,
       src,
+      autoplay: false,
     })
   }
   

src/types/slides.ts

@@ -555,6 +555,8 @@ export interface PPTLatexElement extends PPTBaseElement {
  * 
  * src: 视频地址
  * 
+ * autoplay: 自动播放
+ * 
  * poster: 预览封面
  * 
  * ext: 视频后缀，当资源链接缺少后缀时用该字段确认资源类型
@@ -562,6 +564,7 @@ export interface PPTLatexElement extends PPTBaseElement {
 export interface PPTVideoElement extends PPTBaseElement {
   type: 'video'
   src: string
+  autoplay: boolean
   poster?: string
   ext?: string
 }

src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue

@@ -13,6 +13,16 @@
     <div class="row">
       <Button style="flex: 1;" @click="updateVideo({ poster: '' })">重置封面</Button>
     </div>
+
+    <div class="row switch-row">
+      <div style="width: 40%;">自动播放：</div>
+      <div class="switch-wrapper" style="width: 60%;">
+        <Switch 
+          :value="handleVideoElement.autoplay" 
+          @update:value="value => updateVideo({ autoplay: value })" 
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -26,6 +36,7 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import FileInput from '@/components/FileInput.vue'
 import Button from '@/components/Button.vue'
+import Switch from '@/components/Switch.vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
@@ -86,4 +97,10 @@ const setVideoPoster = (files: FileList) => {
     cursor: pointer;
   }
 }
+.switch-row {
+  height: 32px;
+}
+.switch-wrapper {
+  text-align: right;
+}
 </style>

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

@@ -18,6 +18,7 @@
           :height="elementInfo.height"
           :src="elementInfo.src" 
           :poster="elementInfo.poster"  
+          :autoplay="elementInfo.autoplay"
           :scale="scale" 
         />
       </div>

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

@@ -17,6 +17,7 @@
         class="video"
         ref="videoRef"
         :src="src"
+        :autoplay="autoplay"
         :poster="poster"
         webkit-playsinline
         playsinline
@@ -24,7 +25,7 @@
         @timeupdate="handleTimeupdate()"
         @ended="handleEnded()"
         @progress="handleProgress()"
-        @play="autoHideController()"
+        @play="autoHideController(); paused = false"
         @pause="autoHideController()"
         @error="handleError()"
       ></video>
@@ -123,9 +124,11 @@ const props = withDefaults(defineProps<{
   height: number
   src: string
   poster?: string
+  autoplay?: boolean
   scale?: number
 }>(), {
   poster: '',
+  autoplay: false,
   scale: 1,
 })