feat: 🎸 优化了播放器

src/components/CoursesVideoPlayer/index.css

@@ -20,21 +20,20 @@
 
     .courses-video-player-header {
       width: 100%;
-      height: 18px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding-bottom: 20px;
       border-bottom: 1px solid #e5e6eb;
-      margin-bottom: 20px;
 
       > span {
         color: #2c7aff;
         font-size: 10px;
         font-weight: 600;
         cursor: pointer;
+        /* 添加以下样式来防止点击时背景变色 */
+        -webkit-tap-highlight-color: transparent;
       }
-
       .courses-video-player-header-title {
         cursor: default;
         font-size: 12px;

src/components/CoursesVideoPlayer/index.jsx

@@ -3,6 +3,10 @@ import Locked from "@/components/Locked";
 import "./index.css";
 
 export default ({ className = "", isLock = false }) => {
+  const handleClickBtn = (item) => {
+    console.log(item);
+  };
+
   return (
     <div className={`${className} courses-video-player-wrapper`}>
       {/* 直播板块 */}
@@ -16,14 +20,14 @@ export default ({ className = "", isLock = false }) => {
         ) : (
           <>
             <div className="courses-video-player-header">
-              <span>&lt; 上一集</span>
+              <span onClick={() => handleClickBtn(1)}>&lt; 上一集</span>
               <span className="courses-video-player-header-title">
                 钢铁是怎样炼成的
               </span>
-              <span>下一集 &gt;</span>
+              <span onClick={() => handleClickBtn(2)}>下一集 &gt;</span>
             </div>
             <div className="courses-video-player-video">
-              <video src="" controls></video>
+              <video src="/live.mp4" autoPlay controls></video>
             </div>
           </>
         )}