diff --git a/Merge/front/src/components/HomeFeed.jsx b/Merge/front/src/components/HomeFeed.jsx
index 82e027a..0f3c0fe 100644
--- a/Merge/front/src/components/HomeFeed.jsx
+++ b/Merge/front/src/components/HomeFeed.jsx
@@ -8,6 +8,7 @@
 import { getUserInfo } from '../utils/auth'
 import { deepRecommend } from '../api/recommend_rhj'
 import postsAPI from '../api/posts_api'
+import MediaPreview from './MediaPreview'
 import '../style/HomeFeed.css'
 
 const categories = [
@@ -59,9 +60,10 @@
               title:  d.title,
               author: `作者 ${d.user_id}`,
               avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
-              img:    d.media_urls?.[0] || '',
+              media:  d.media_urls?.[0] || '', // 改为 media，支持图片和视频
               likes:  d.heat,
-              content: d.content || ''
+              content: d.content || '',
+              mediaUrls: d.media_urls || [] // 保存所有媒体URL
             }
           } catch {
             return {
@@ -69,9 +71,10 @@
               title: item.title,
               author: item.author || '佚名',
               avatar: `https://i.pravatar.cc/40?img=${item.id}`,
-              img: item.img || '',
+              media: item.img || '',
               likes: item.heat || 0,
-              content: item.content || ''
+              content: item.content || '',
+              mediaUrls: []
             }
           }
         })
@@ -101,9 +104,10 @@
               title:  d.title,
               author: `作者 ${d.user_id}`,
               avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
-              img:    d.media_urls?.[0] || '',
+              media:  d.media_urls?.[0] || '', // 改为 media，支持图片和视频
               likes:  d.heat,
-              content: d.content || ''
+              content: d.content || '',
+              mediaUrls: d.media_urls || [] // 保存所有媒体URL
             }
           } catch {
             // 拉详情失败时兜底
@@ -112,9 +116,10 @@
               title: item.title,
               author: item.author || '佚名',
               avatar: `https://i.pravatar.cc/40?img=${item.id}`,
-              img: item.img || '',
+              media: item.img || '',
               likes: item.heat || 0,
-              content: item.content || ''
+              content: item.content || '',
+              mediaUrls: []
             }
           }
         })
@@ -144,9 +149,10 @@
               title:  d.title,
               author: `作者 ${d.user_id}`,
               avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
-              img:    d.media_urls?.[0] || '',
+              media:  d.media_urls?.[0] || '', // 改为 media，支持图片和视频
               likes:  d.heat,
-              content: d.content || ''
+              content: d.content || '',
+              mediaUrls: d.media_urls || [] // 保存所有媒体URL
             }
           } catch {
             // 拉详情失败时兜底
@@ -155,9 +161,10 @@
               title: item.title,
               author: item.author || '佚名',
               avatar: `https://i.pravatar.cc/40?img=${item.id}`,
-              img: item.img || '',
+              media: item.img || '',
               likes: item.heat || 0,
-              content: item.content || ''
+              content: item.content || '',
+              mediaUrls: []
             }
           }
         })
@@ -187,9 +194,10 @@
               title:  d.title,
               author: `作者 ${d.user_id}`,
               avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
-              img:    d.media_urls?.[0] || '',
+              media:  d.media_urls?.[0] || '', // 改为 media，支持图片和视频
               likes:  d.heat,
-              content: d.content || ''
+              content: d.content || '',
+              mediaUrls: d.media_urls || [] // 保存所有媒体URL
             }
           } catch {
             return {
@@ -197,9 +205,10 @@
               title: item.title,
               author: item.author || '佚名',
               avatar: `https://i.pravatar.cc/40?img=${item.id}`,
-              img: item.img || '',
+              media: item.img || '',
               likes: item.heat || 0,
-              content: item.content || ''
+              content: item.content || '',
+              mediaUrls: []
             }
           }
         })
@@ -260,9 +269,11 @@
               id:     d.id,
               title:  d.title,
               author: `作者 ${d.user_id}`,
-              // avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
-              img:    d.media_urls?.[0] || '', // 用第一张媒体作为封面
-              likes:  d.heat
+              authorId: d.user_id,
+              avatar: `http://192.168.5.200:8080/static/profile.webp`,
+              media:  d.media_urls?.[0] || '', // 改为 media，支持图片和视频
+              likes:  d.heat,
+              mediaUrls: d.media_urls || [] // 保存所有媒体URL
             }
           })
         )
@@ -304,6 +315,8 @@
     }
   }
 
+  const [previewImg, setPreviewImg] = useState(null)
+
   const handlePostClick = (postId) => {
     navigate(`/post/${postId}`)
   }
@@ -431,7 +444,20 @@
           ) : (
             items.map(item => (
               <div key={item.id} className="feed-card" onClick={() => handlePostClick(item.id)}>
-                {item.img && <img className="card-img" src={item.img} alt={item.title} />}
+                {item.media && (
+                  <MediaPreview
+                    url={item.media}
+                    alt={item.title}
+                    className="card-img"
+                    onClick={(url) => {
+                      // 对于图片，显示预览
+                      if (!url.toLowerCase().includes('video') && !url.includes('.mp4') && !url.includes('.webm')) {
+                        setPreviewImg(url)
+                      }
+                    }}
+                    style={{ cursor: 'pointer' }}
+                  />
+                )}
                 <h3 className="card-title">{item.title}</h3>
                 {item.content && <div className="card-content">{item.content.slice(0, 60) || ''}</div>}
                 <div className="card-footer">
@@ -449,6 +475,37 @@
           )}
         </div>
       )}
+
+      {/* 图片预览弹窗 */}
+      {previewImg && (
+        <div 
+          className="img-preview-mask" 
+          style={{
+            position: 'fixed',
+            zIndex: 9999,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: 'rgba(0,0,0,0.7)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }} 
+          onClick={() => setPreviewImg(null)}
+        >
+          <img 
+            src={previewImg} 
+            alt="大图预览" 
+            style={{
+              maxWidth: '90vw',
+              maxHeight: '90vh',
+              borderRadius: 12,
+              boxShadow: '0 4px 24px #0008'
+            }} 
+          />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/Merge/front/src/components/MediaPreview.jsx b/Merge/front/src/components/MediaPreview.jsx
new file mode 100644
index 0000000..3f0c6e2
--- /dev/null
+++ b/Merge/front/src/components/MediaPreview.jsx
@@ -0,0 +1,119 @@
+import React, { useState } from 'react'
+import VideoPreview from './VideoPreview'
+import { Play } from 'lucide-react'
+
+// 判断文件是否为视频
+const isVideoFile = (url) => {
+  if (!url) return false
+  const videoExtensions = ['.mp4', '.webm', '.ogg', '.avi', '.mov', '.wmv', '.flv', '.mkv']
+  const lowerUrl = url.toLowerCase()
+  return videoExtensions.some(ext => lowerUrl.includes(ext)) || lowerUrl.includes('video')
+}
+
+// 媒体预览组件（支持图片和视频）
+const MediaPreview = ({ 
+  url, 
+  alt = '', 
+  className = '', 
+  style = {}, 
+  onClick = null,
+  showPlayIcon = true,
+  maxWidth = 220,
+  maxHeight = 220 
+}) => {
+  const [showVideoPreview, setShowVideoPreview] = useState(false)
+  
+  const handleMediaClick = () => {
+    if (isVideoFile(url)) {
+      setShowVideoPreview(true)
+    } else if (onClick) {
+      onClick(url)
+    }
+  }
+
+  const defaultStyle = {
+    maxWidth,
+    maxHeight,
+    borderRadius: 8,
+    objectFit: 'cover',
+    cursor: 'pointer',
+    ...style
+  }
+
+  if (isVideoFile(url)) {
+    return (
+      <>
+        <div style={{ position: 'relative', ...defaultStyle }} onClick={handleMediaClick}>
+          <video
+            src={url}
+            style={defaultStyle}
+            preload="metadata"
+            muted
+          />
+          {showPlayIcon && (
+            <div style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              background: 'rgba(0,0,0,0.6)',
+              borderRadius: '50%',
+              padding: 12,
+              color: 'white'
+            }}>
+              <Play size={24} fill="white" />
+            </div>
+          )}
+        </div>
+        
+        {/* 视频预览弹窗 */}
+        {showVideoPreview && (
+          <div 
+            style={{
+              position: 'fixed',
+              zIndex: 9999,
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: 'rgba(0,0,0,0.8)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: 20
+            }}
+            onClick={() => setShowVideoPreview(false)}
+          >
+            <div 
+              style={{ 
+                maxWidth: '90vw', 
+                maxHeight: '90vh', 
+                width: 'auto', 
+                height: 'auto' 
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <VideoPreview
+                src={url}
+                onClose={() => setShowVideoPreview(false)}
+                style={{ borderRadius: 12, overflow: 'hidden' }}
+              />
+            </div>
+          </div>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <img
+      src={url}
+      alt={alt}
+      className={className}
+      style={defaultStyle}
+      onClick={handleMediaClick}
+    />
+  )
+}
+
+export default MediaPreview
diff --git a/Merge/front/src/components/PostDetailJWLLL.jsx b/Merge/front/src/components/PostDetailJWLLL.jsx
index d598a72..01f64b5 100644
--- a/Merge/front/src/components/PostDetailJWLLL.jsx
+++ b/Merge/front/src/components/PostDetailJWLLL.jsx
@@ -5,6 +5,7 @@
 import { getUserInfo } from '../utils/auth'
 import FollowButton from './FollowButton'
 import postsAPI from '../api/posts_api'
+import MediaPreview from './MediaPreview'
 import '../style/PostDetail.css'
 import dayjs from 'dayjs'
 
@@ -314,11 +315,24 @@
           </div>
         )}
 
-        {/* 帖子图片（支持多图） */}
+        {/* 帖子媒体（支持多图/多视频） */}
         {Array.isArray(post.media_urls) && post.media_urls.length > 0 && (
-          <div className="post-images" style={{display:'flex',gap:8,marginBottom:16}}>
+          <div className="post-media" style={{display:'flex',gap:8,marginBottom:16,flexWrap:'wrap'}}>
             {post.media_urls.map((url, idx) => (
-              <img key={idx} src={url} alt={`图片${idx+1}`} style={{maxWidth:220,maxHeight:220,borderRadius:8,objectFit:'cover',cursor:'pointer'}} onClick={() => setPreviewImg(url)} />
+              <MediaPreview
+                key={idx}
+                url={url}
+                alt={`媒体${idx+1}`}
+                onClick={(mediaUrl) => {
+                  // 对于图片，显示预览
+                  if (!mediaUrl.toLowerCase().includes('video') && !mediaUrl.includes('.mp4') && !mediaUrl.includes('.webm')) {
+                    setPreviewImg(mediaUrl)
+                  }
+                }}
+                style={{ cursor: 'pointer' }}
+                maxWidth={320}
+                maxHeight={320}
+              />
             ))}
           </div>
         )}
diff --git a/Merge/front/src/components/UploadPage.jsx b/Merge/front/src/components/UploadPage.jsx
index 817a210..405aeb8 100644
--- a/Merge/front/src/components/UploadPage.jsx
+++ b/Merge/front/src/components/UploadPage.jsx
@@ -170,6 +170,17 @@
                   <div className="file-thumbnail">
                     <img src={URL.createObjectURL(file)} alt={file.name} />
                   </div>
+                ) : file.type.startsWith('video/') ? (
+                  <div className="file-thumbnail video-thumbnail">
+                    <video 
+                      src={URL.createObjectURL(file)} 
+                      muted 
+                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                    />
+                    <div className="video-overlay">
+                      <Video size={24} />
+                    </div>
+                  </div>
                 ) : (
                   <div className="file-thumbnail video-thumbnail">
                     <Video size={24} />
diff --git a/Merge/front/src/components/VideoPreview.jsx b/Merge/front/src/components/VideoPreview.jsx
new file mode 100644
index 0000000..9183c11
--- /dev/null
+++ b/Merge/front/src/components/VideoPreview.jsx
@@ -0,0 +1,199 @@
+import React, { useState, useRef } from 'react'
+import { Play, Pause, Volume2, VolumeX, Maximize2, X } from 'lucide-react'
+
+const VideoPreview = ({ src, poster, onClose, className = '', style = {} }) => {
+  const videoRef = useRef(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [isMuted, setIsMuted] = useState(false)
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [duration, setDuration] = useState(0)
+  const [currentTime, setCurrentTime] = useState(0)
+
+  const togglePlay = () => {
+    if (videoRef.current) {
+      if (isPlaying) {
+        videoRef.current.pause()
+      } else {
+        videoRef.current.play()
+      }
+      setIsPlaying(!isPlaying)
+    }
+  }
+
+  const toggleMute = () => {
+    if (videoRef.current) {
+      videoRef.current.muted = !isMuted
+      setIsMuted(!isMuted)
+    }
+  }
+
+  const toggleFullscreen = () => {
+    if (videoRef.current) {
+      if (!isFullscreen) {
+        if (videoRef.current.requestFullscreen) {
+          videoRef.current.requestFullscreen()
+        }
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        }
+      }
+      setIsFullscreen(!isFullscreen)
+    }
+  }
+
+  const handleTimeUpdate = () => {
+    if (videoRef.current) {
+      setCurrentTime(videoRef.current.currentTime)
+    }
+  }
+
+  const handleLoadedMetadata = () => {
+    if (videoRef.current) {
+      setDuration(videoRef.current.duration)
+    }
+  }
+
+  const handleSeek = (e) => {
+    if (videoRef.current) {
+      const rect = e.currentTarget.getBoundingClientRect()
+      const clickX = e.clientX - rect.left
+      const newTime = (clickX / rect.width) * duration
+      videoRef.current.currentTime = newTime
+      setCurrentTime(newTime)
+    }
+  }
+
+  const formatTime = (time) => {
+    const minutes = Math.floor(time / 60)
+    const seconds = Math.floor(time % 60)
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`
+  }
+
+  return (
+    <div className={`video-preview ${className}`} style={style}>
+      <div className="video-container" style={{ position: 'relative', borderRadius: 8, overflow: 'hidden' }}>
+        <video
+          ref={videoRef}
+          src={src}
+          poster={poster}
+          onTimeUpdate={handleTimeUpdate}
+          onLoadedMetadata={handleLoadedMetadata}
+          onPlay={() => setIsPlaying(true)}
+          onPause={() => setIsPlaying(false)}
+          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+          preload="metadata"
+        />
+        
+        {/* 视频控制层 */}
+        <div 
+          className="video-controls" 
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
+            padding: '20px 12px 12px',
+            opacity: 1,
+            transition: 'opacity 0.3s'
+          }}
+        >
+          {/* 进度条 */}
+          <div 
+            className="progress-bar" 
+            style={{
+              height: 4,
+              background: 'rgba(255,255,255,0.3)',
+              borderRadius: 2,
+              marginBottom: 8,
+              cursor: 'pointer'
+            }}
+            onClick={handleSeek}
+          >
+            <div 
+              style={{
+                height: '100%',
+                background: '#fff',
+                borderRadius: 2,
+                width: `${duration ? (currentTime / duration) * 100 : 0}%`,
+                transition: 'width 0.1s'
+              }}
+            />
+          </div>
+
+          {/* 控制按钮 */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <button
+                onClick={togglePlay}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: 'white',
+                  cursor: 'pointer',
+                  padding: 4,
+                  borderRadius: 4
+                }}
+              >
+                {isPlaying ? <Pause size={20} /> : <Play size={20} />}
+              </button>
+              
+              <button
+                onClick={toggleMute}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: 'white',
+                  cursor: 'pointer',
+                  padding: 4,
+                  borderRadius: 4
+                }}
+              >
+                {isMuted ? <VolumeX size={18} /> : <Volume2 size={18} />}
+              </button>
+
+              <span style={{ color: 'white', fontSize: 12 }}>
+                {formatTime(currentTime)} / {formatTime(duration)}
+              </span>
+            </div>
+
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <button
+                onClick={toggleFullscreen}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: 'white',
+                  cursor: 'pointer',
+                  padding: 4,
+                  borderRadius: 4
+                }}
+              >
+                <Maximize2 size={18} />
+              </button>
+
+              {onClose && (
+                <button
+                  onClick={onClose}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    color: 'white',
+                    cursor: 'pointer',
+                    padding: 4,
+                    borderRadius: 4
+                  }}
+                >
+                  <X size={18} />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default VideoPreview