Merge pull request '合并加载本地视频' (#13) from master into wangjing22e

docs/第三方服务/WebIDE.mdx

@@ -68,8 +68,8 @@ Gitlink 通过实现 Blame 插件，完成了编辑器 Blame 查看的能力：
 
 <VideoDemo
   title="GitLink WebIDE 使用教程"
-  platform="bilibili"
-  videoId="BV1Hkr7YYEh8"
+  platform="local"
+  videoId="/mp4/example.mp4"
   options={{ 
     showTips: false
   }}

src/components/VideoDemo/index.js

@@ -6,8 +6,8 @@ import styles from './styles.module.css';
  * @param {Object} props
  * @param {string} props.title - 视频标题
  * @param {string} props.description - 视频描述
- * @param {string} props.platform - 视频平台 (bilibili, youku, youtube)
- * @param {string} props.videoId - 视频ID
+ * @param {string} props.platform - 视频平台 (bilibili, youku, youtube, local)
+ * @param {string} props.videoId - 视频ID或本地视频路径
  * @param {Object} props.options - 其他选项
  */
 function VideoDemo({ 
@@ -28,6 +28,8 @@ function VideoDemo({
         return `//player.youku.com/embed/${videoId}${options.autoplay ? '?autoplay=1' : ''}`;
       case 'youtube':
         return `//www.youtube.com/embed/${videoId}${options.autoplay ? '?autoplay=1' : ''}`;
+      case 'local':
+        return videoId; // 本地视频路径
       default:
         return '';
     }
@@ -36,6 +38,41 @@ function VideoDemo({
   const handleIframeLoad = () => {
     setIsLoaded(true);
   };
+  
+  const handleVideoLoad = () => {
+    setIsLoaded(true);
+  };
+
+  // 渲染本地视频播放器
+  const renderLocalVideo = () => {
+    return (
+      <video 
+        className={styles.videoFrame}
+        controls
+        preload="metadata"
+        onLoadedData={handleVideoLoad}
+        autoPlay={options.autoplay}
+        muted={options.muted}
+      >
+        <source src={getVideoSrc()} type="video/mp4" />
+        您的浏览器不支持 HTML5 视频播放。
+      </video>
+    );
+  };
+  
+  // 渲染在线视频播放器
+  const renderOnlineVideo = () => {
+    return (
+      <iframe 
+        src={getVideoSrc()}
+        className={styles.videoFrame}
+        frameBorder="0" 
+        allowFullScreen
+        onLoad={handleIframeLoad}
+        title={title}
+      ></iframe>
+    );
+  };
 
   return (
     <div className={styles.videoDemo}>
@@ -44,19 +81,15 @@ function VideoDemo({
       
       <div className={styles.videoWrapper}>
         {!isLoaded && <div className={styles.loadingIndicator}>加载中...</div>}
-        <iframe 
-          src={getVideoSrc()}
-          className={styles.videoFrame}
-          frameBorder="0" 
-          allowFullScreen
-          onLoad={handleIframeLoad}
-          title={title}
-        ></iframe>
+        {platform.toLowerCase() === 'local' 
+          ? renderLocalVideo() 
+          : renderOnlineVideo()
+        }
       </div>
       
-      {options.showTips && options.tips && (
+      {options.showTips && (
         <div className={styles.videoTips}>
-          <p>提示: {options.tips}</p>
+          <p>提示: {options.tips || "可以使用播放器控制栏调整播放速度和画质"}</p>
         </div>
       )}
     </div>