diff --git a/src/elderly/components/MediaPlayer.tsx b/src/elderly/components/MediaPlayer.tsx
new file mode 100644
index 0000000..dc31d51
--- /dev/null
+++ b/src/elderly/components/MediaPlayer.tsx
@@ -0,0 +1,300 @@
+import React, { useState, useEffect } from 'react';
+import { ThumbsUp, ThumbsDown, X, Grid3x3 } from 'lucide-react';
+import * as mediaService from '../services/mediaService';
+import { MediaLibraryGrid } from './MediaLibraryGrid';
+
+interface MediaPlayerProps {
+  familyId: string;
+  elderlyId: number;
+  currentMood?: string;
+  onClose?: () => void;
+}
+
+/**
+ * 老人端媒体播放器组件
+ * 自动获取推荐媒体并播放，支持点赞/点踩反馈
+ */
+export const MediaPlayer: React.FC<MediaPlayerProps> = ({
+  familyId,
+  elderlyId,
+  currentMood,
+  onClose,
+}) => {
+  const [recommendedMedia, setRecommendedMedia] = useState<mediaService.RecommendedMedia[]>([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [playStartTime, setPlayStartTime] = useState<Date | null>(null);
+  const [hasGivenFeedback, setHasGivenFeedback] = useState(false);
+  const [showGrid, setShowGrid] = useState(false);
+
+  // 加载推荐媒体
+  useEffect(() => {
+    loadRecommendedMedia();
+  }, [familyId, elderlyId, currentMood]);
+
+  // 记录播放开始时间
+  useEffect(() => {
+    if (currentMedia) {
+      setPlayStartTime(new Date());
+      setHasGivenFeedback(false);
+    }
+  }, [currentIndex]);
+
+  const loadRecommendedMedia = async () => {
+    try {
+      setLoading(true);
+      const media = await mediaService.getRecommendedMedia(
+        familyId,
+        elderlyId,
+        currentMood
+      );
+      setRecommendedMedia(media);
+      // 如果有媒体，记录第一个的播放
+      if (media.length > 0) {
+        recordPlayStart(media[0].id);
+      }
+    } catch (error) {
+      console.error('加载推荐媒体失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 记录播放开始（不等待完成）
+  const recordPlayStart = async (mediaId: number) => {
+    try {
+      await mediaService.recordMediaPlay(mediaId, {
+        elderly_id: elderlyId,
+        duration_watched: 0,
+        completed: 0,
+        triggered_by: 'auto',
+        mood_before: currentMood,
+      });
+      console.log('播放记录已创建, mediaId:', mediaId);
+    } catch (error) {
+      console.error('记录播放开始失败:', error);
+    }
+  };
+
+  const currentMedia = recommendedMedia[currentIndex];
+
+  // 记录播放
+  const recordPlay = async (completed: boolean = false) => {
+    if (!currentMedia || !playStartTime) return;
+
+    const durationWatched = Math.floor((new Date().getTime() - playStartTime.getTime()) / 1000);
+
+    try {
+      await mediaService.recordMediaPlay(currentMedia.id, {
+        elderly_id: elderlyId,
+        duration_watched: durationWatched,
+        completed: completed ? 1 : 0,
+        triggered_by: 'auto',
+        mood_before: currentMood,
+      });
+    } catch (error) {
+      console.error('记录播放失败:', error);
+    }
+  };
+
+  // 处理反馈
+  const handleFeedback = async (type: 'like' | 'dislike') => {
+    if (!currentMedia || hasGivenFeedback) return;
+
+    try {
+      await mediaService.submitFeedback(currentMedia.id, {
+        elderly_id: elderlyId,
+        feedback_type: type,
+      });
+      setHasGivenFeedback(true);
+
+      // 自动切换到下一个
+      setTimeout(() => {
+        handleNext();
+      }, 1000);
+    } catch (error) {
+      console.error('提交反馈失败:', error);
+    }
+  };
+
+  // 下一个媒体
+  const handleNext = async () => {
+    await recordPlay(true);
+
+    if (currentIndex < recommendedMedia.length - 1) {
+      const nextIndex = currentIndex + 1;
+      setCurrentIndex(nextIndex);
+      // 记录下一个媒体的播放
+      recordPlayStart(recommendedMedia[nextIndex].id);
+    } else {
+      // 已经是最后一个，重新加载
+      await loadRecommendedMedia();
+      setCurrentIndex(0);
+    }
+  };
+
+  // 关闭播放器
+  const handleClose = async () => {
+    await recordPlay(false);
+    onClose?.();
+  };
+
+  if (loading) {
+    return (
+      <div className="fixed inset-0 bg-black flex items-center justify-center z-50">
+        <div className="text-white text-xl">正在加载...</div>
+      </div>
+    );
+  }
+
+  if (!currentMedia) {
+    return (
+      <div className="fixed inset-0 bg-black flex items-center justify-center z-50">
+        <div className="text-white text-center">
+          <p className="text-xl mb-4">暂时没有推荐的照片或视频</p>
+          <button
+            onClick={handleClose}
+            className="px-6 py-3 bg-white text-black rounded-lg hover:bg-gray-200 transition-colors"
+          >
+            关闭
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black flex flex-col z-50">
+      {/* 数字人小圆圈头像 - 左上角 */}
+      <div className="absolute top-6 left-6 z-20">
+        <div className="relative">
+          {/* 数字人圆圈 */}
+          <div className="w-24 h-24 rounded-full bg-gradient-to-br from-primary-400 to-primary-500 shadow-2xl flex items-center justify-center border-4 border-white/30 backdrop-blur-sm animate-breathe">
+            <div className="text-5xl">👤</div>
+          </div>
+
+          {/* 提示文字 */}
+          <div className="absolute -bottom-10 left-0 bg-white/90 backdrop-blur-sm px-3 py-1.5 rounded-full shadow-lg whitespace-nowrap">
+            <p className="text-xs font-medium text-gray-700">随时问我</p>
+          </div>
+        </div>
+      </div>
+
+      {/* 标题和进度 - 顶部中间 */}
+      <div className="absolute top-6 left-0 right-0 z-10 flex flex-col items-center gap-2 px-6">
+        <p className="text-2xl font-bold text-white bg-black/60 backdrop-blur-sm px-6 py-3 rounded-2xl">
+          {currentMedia.title}
+        </p>
+        {recommendedMedia.length > 1 && (
+          <p className="text-base text-white bg-black/40 backdrop-blur-sm px-4 py-2 rounded-full">
+            {currentIndex + 1} / {recommendedMedia.length}
+          </p>
+        )}
+      </div>
+
+      {/* 媒体内容区 */}
+      <div className="flex-1 flex items-center justify-center p-8">
+        {currentMedia.media_type === 'photo' ? (
+          <img
+            src={mediaService.getMediaUrl(currentMedia.file_path)}
+            alt={currentMedia.title}
+            className="max-w-full max-h-full object-contain"
+          />
+        ) : (
+          <video
+            src={mediaService.getMediaUrl(currentMedia.file_path)}
+            controls
+            autoPlay
+            className="max-w-full max-h-full"
+            onEnded={handleNext}
+          />
+        )}
+      </div>
+
+      {/* 底部操作栏 - 悬浮 */}
+      <div className="absolute bottom-0 left-0 right-0 z-10 bg-gradient-to-t from-black/70 to-transparent backdrop-blur-md p-4">
+        <div className="flex items-center justify-center gap-4 max-w-lg mx-auto">
+          {/* 喜欢按钮 */}
+          <button
+            onClick={() => handleFeedback('like')}
+            disabled={hasGivenFeedback}
+            className={`
+              ${hasGivenFeedback ? 'bg-gray-600 cursor-not-allowed' : 'bg-green-500 hover:bg-green-600'}
+              text-white
+              flex items-center justify-center gap-2
+              px-6 py-4
+              rounded-2xl
+              shadow-xl
+              active:scale-95
+              transition-all
+              flex-1
+            `}
+          >
+            <ThumbsUp size={28} strokeWidth={2.5} />
+            <span className="text-lg font-bold">喜欢</span>
+          </button>
+
+          {/* 不喜欢按钮 */}
+          <button
+            onClick={() => handleFeedback('dislike')}
+            disabled={hasGivenFeedback}
+            className={`
+              ${hasGivenFeedback ? 'bg-gray-600 cursor-not-allowed' : 'bg-red-500 hover:bg-red-600'}
+              text-white
+              flex items-center justify-center gap-2
+              px-6 py-4
+              rounded-2xl
+              shadow-xl
+              active:scale-95
+              transition-all
+              flex-1
+            `}
+          >
+            <ThumbsDown size={28} strokeWidth={2.5} />
+            <span className="text-lg font-bold">不喜欢</span>
+          </button>
+
+          {/* 显示全部按钮 */}
+          {recommendedMedia.length > 1 && (
+            <button
+              onClick={() => setShowGrid(true)}
+              className="bg-blue-600 hover:bg-blue-700 text-white p-4 rounded-2xl shadow-xl active:scale-95 transition-all"
+              aria-label="查看全部"
+            >
+              <Grid3x3 size={28} strokeWidth={2.5} />
+            </button>
+          )}
+
+          {/* 关闭按钮 */}
+          <button
+            onClick={handleClose}
+            className="bg-gray-700 hover:bg-gray-800 text-white p-4 rounded-2xl shadow-xl active:scale-95 transition-all"
+            aria-label="关闭"
+          >
+            <X size={28} strokeWidth={2.5} />
+          </button>
+        </div>
+      </div>
+
+      {/* 网格视图弹窗 */}
+      {showGrid && (
+        <MediaLibraryGrid
+          mediaList={recommendedMedia.map(m => ({
+            id: m.id.toString(),
+            url: mediaService.getMediaUrl(m.file_path),
+            thumbnailUrl: m.thumbnail_path ? mediaService.getThumbnailUrl(m.thumbnail_path) : undefined,
+            type: m.media_type,
+            caption: m.title,
+            tags: m.tags || []
+          }))}
+          currentIndex={currentIndex}
+          onSelect={(index) => {
+            setCurrentIndex(index);
+            setShowGrid(false);
+          }}
+          onClose={() => setShowGrid(false)}
+        />
+      )}
+    </div>
+  );
+};