diff --git a/apps/web/src/components/presentation/video-player/ControlButtons/Play.tsx b/apps/web/src/components/presentation/video-player/ControlButtons/Play.tsx
index fdff076..721242d 100755
--- a/apps/web/src/components/presentation/video-player/ControlButtons/Play.tsx
+++ b/apps/web/src/components/presentation/video-player/ControlButtons/Play.tsx
@@ -4,22 +4,25 @@ import { PauseIcon, PlayIcon } from "@heroicons/react/24/solid";
 
 export default function Play() {
 	const { isPlaying, videoRef } = useContext(VideoPlayerContext);
-
+	const handleClick = (event) => {
+		event.stopPropagation(); // 阻止事件冒泡
+		if (videoRef.current?.paused) {
+			videoRef.current.play();
+		} else {
+			videoRef.current?.pause();
+		}
+	};
 	return (
 		<>
-			<button
-				onClick={() =>
-					videoRef.current?.paused
-						? videoRef.current.play()
-						: videoRef.current?.pause()
-				}
+			<div
+				onClick={handleClick}
 				className="text-white hover:text-primaryHover">
 				{isPlaying ? (
 					<PauseIcon className="w-10 h-10" />
 				) : (
 					<PlayIcon className="w-10 h-10" />
 				)}
-			</button>
+			</div>
 		</>
 	);
 }