feat(video): 添加视频播放功能及缓存版本控制

- 引入useState管理播放状态
- 添加视频播放按钮事件处理函数handlePlay
- 视频元素增加多种属性以兼容移动端播放
- 使用版本号参数解决视频缓存问题
- 使用变量管理视频地址及封面图地址
- 新增移动端播放引导提示文字

src/pages/index/Video.tsx

@@ -1,20 +1,47 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import Taro from '@tarojs/taro';
+
+const videoUrl = 'https://oss.wsdns.cn/20260406/2be0376cac054f2ba86dd35a2bc52e11.mp4'
+// 添加版本号解决缓存问题
+const videoVersion = 'v=1.0'
+const posterUrl = `${videoUrl}?x-oss-process=video/snapshot,t_1000,f_jpg,w_396,h_222,m_fast`
 
 const MyPage = () => {
+  const [isPlaying, setIsPlaying] = useState(false)
 
   useEffect(() => {
   }, [])
 
+  // 点击播放按钮
+  const handlePlay = () => {
+    const video = document.querySelector('video')
+    if (video) {
+      video.play()
+      setIsPlaying(true)
+    }
+  }
+
   return (
     <div className={'px-3'}>
       <video
+        id="homeVideo"
         controls
+        playsInline
+        webkit-playsinline="true"
+        x5-video-player-type="h5"
+        x5-video-player-fullscreen="false"
+        preload="metadata"
         className='w-full max-w-2xl mx-auto'
-        poster='https://oss.wsdns.cn/20260406/2be0376cac054f2ba86dd35a2bc52e11.mp4?x-oss-process=video/snapshot,t_1000,f_jpg,w_396,h_222,m_fast'
+        poster={posterUrl}
       >
-        <source src='https://oss.wsdns.cn/20260406/2be0376cac054f2ba86dd35a2bc52e11.mp4' type='video/mp4' />
+        <source src={`${videoUrl}?${videoVersion}`} type='video/mp4' />
         您的浏览器不支持视频播放
       </video>
+      
+      {/* 移动端播放引导（可选的UI增强） */}
+      <div className={'text-center text-gray-400 text-xs mt-2'}>
+        如视频无法播放，请点击视频区域
+      </div>
     </div>
   )
 }