From 23a4e58d91ae6b8e3613b0dc82ce9698666c6e29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Tue, 7 Apr 2026 20:57:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(video):=20=E6=B7=BB=E5=8A=A0=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E6=92=AD=E6=94=BE=E5=8A=9F=E8=83=BD=E5=8F=8A=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98=E7=89=88=E6=9C=AC=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入useState管理播放状态
- 添加视频播放按钮事件处理函数handlePlay
- 视频元素增加多种属性以兼容移动端播放
- 使用版本号参数解决视频缓存问题
- 使用变量管理视频地址及封面图地址
- 新增移动端播放引导提示文字
---
 src/pages/index/Video.tsx | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/pages/index/Video.tsx b/src/pages/index/Video.tsx
index e70e838..9196914 100644
--- a/src/pages/index/Video.tsx
+++ b/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>
   )
 }