feat(视频播放器): 添加VideoPlayer组件并集成到HomePage

新增VideoPlayer组件以支持视频播放功能，并在HomePage中集成。同时添加了相关依赖video.js和@videojs-player/vue，确保视频播放功能的实现和兼容性。

feat(视频播放器): 添加VideoPlayer组件并集成到HomePage
新增VideoPlayer组件以支持视频播放功能，并在HomePage中集成。同时添加了相关依赖video.js和@videojs-player/vue，确保视频播放功能的实现和兼容性。
hookehuyr
Commit ac9b3c9160cba21ccecff0693886531a61db425a ac9b3c91 1 parent 8e179cdd
Showing 5 changed files with 361 additions and 20 deletions
package-lock.json
package.json
src/components.d.ts
src/components/ui/VideoPlayer.vue
src/views/HomePage.vue
--- a/package-lock.json
View file @ac9b3c9
+++ b/package-lock.json
View file @ac9b3c9
@@ -10,10 +10,12 @@
       "dependencies": {
         "@heroicons/vue": "^2.2.0",
         "@vant/use": "^1.6.0",
+        "@videojs-player/vue": "^1.0.0",
         "dayjs": "^1.11.13",
         "swiper": "^11.2.6",
         "vant": "^4.9.18",
         "vconsole": "^3.15.1",
+        "video.js": "^7.21.7",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0",
         "weixin-js-sdk": "^1.6.5"
@@ -1195,6 +1197,12 @@
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true
     },
+    "node_modules/@types/video.js": {
+      "version": "7.3.58",
+      "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.58.tgz",
+      "integrity": "sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==",
+      "peer": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.21",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
@@ -1214,6 +1222,62 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/@videojs-player/vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs-player/vue/-/vue-1.0.0.tgz",
+      "integrity": "sha512-WonTezRfKu3fYdQLt/ta+nuKH6gMZUv8l40Jke/j4Lae7IqeO/+lLAmBnh3ni88bwR+vkFXIlZ2Ci7VKInIYJg==",
+      "peerDependencies": {
+        "@types/video.js": "7.x",
+        "video.js": "7.x",
+        "vue": "3.x"
+      }
+    },
+    "node_modules/@videojs/http-streaming": {
+      "version": "2.16.3",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.16.3.tgz",
+      "integrity": "sha512-91CJv5PnFBzNBvyEjt+9cPzTK/xoVixARj2g7ZAvItA+5bx8VKdk5RxCz/PP2kdzz9W+NiDUMPkdmTsosmy69Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "3.0.5",
+        "aes-decrypter": "3.1.3",
+        "global": "^4.4.0",
+        "m3u8-parser": "4.8.0",
+        "mpd-parser": "^0.22.1",
+        "mux.js": "6.0.1",
+        "video.js": "^6 || ^7"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "video.js": "^6 || ^7"
+      }
+    },
+    "node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.3.tgz",
@@ -1429,6 +1493,14 @@
         "vue": "^3.5.0"
       }
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.14.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -1441,6 +1513,17 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/aes-decrypter": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.3.tgz",
+      "integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
@@ -1855,6 +1938,11 @@
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "dev": true
     },
+    "node_modules/dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2229,6 +2317,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -2289,6 +2386,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2334,6 +2436,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -2415,6 +2522,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/keycode": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
+      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -2459,6 +2571,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/m3u8-parser": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.8.0.tgz",
+      "integrity": "sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -2519,6 +2641,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "dependencies": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -2572,6 +2702,20 @@
         "pathe": "^2.0.1"
       }
     },
+    "node_modules/mpd-parser": {
+      "version": "0.22.1",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.22.1.tgz",
+      "integrity": "sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "mpd-to-m3u8-json": "bin/parse.js"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2583,6 +2727,22 @@
       "resolved": "https://registry.npmjs.org/mutation-observer/-/mutation-observer-1.0.3.tgz",
       "integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA=="
     },
+    "node_modules/mux.js": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.0.1.tgz",
+      "integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -2749,6 +2909,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      },
+      "bin": {
+        "pkcs7": "bin/cli.js"
+      }
+    },
     "node_modules/pkg-types": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.0.tgz",
@@ -2902,6 +3073,14 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -3076,6 +3255,22 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "dependencies": {
+        "individual": "^2.0.0"
+      }
+    },
+    "node_modules/safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "dependencies": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "node_modules/scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
@@ -3707,6 +3902,11 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3737,6 +3937,39 @@
         "mutation-observer": "^1.0.3"
       }
     },
+    "node_modules/video.js": {
+      "version": "7.21.7",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.7.tgz",
+      "integrity": "sha512-T2s3WFAht7Zjr2OSJamND9x9Dn2O+Z5WuHGdh8jI5SYh5mkMdVTQ7vSRmA5PYpjXJ2ycch6jpMjkJEIEU2xxqw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "2.16.3",
+        "@videojs/vhs-utils": "^3.0.4",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "3.1.3",
+        "global": "^4.4.0",
+        "keycode": "^2.2.0",
+        "m3u8-parser": "4.8.0",
+        "mpd-parser": "0.22.1",
+        "mux.js": "6.0.1",
+        "safe-json-parse": "4.0.0",
+        "videojs-font": "3.2.0",
+        "videojs-vtt.js": "^0.15.5"
+      }
+    },
+    "node_modules/videojs-font": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
+    },
+    "node_modules/videojs-vtt.js": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
+      "dependencies": {
+        "global": "^4.3.1"
+      }
+    },
     "node_modules/vite": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.2.tgz",
--- a/package.json
View file @ac9b3c9
+++ b/package.json
View file @ac9b3c9
@@ -17,10 +17,12 @@
   "dependencies": {
     "@heroicons/vue": "^2.2.0",
     "@vant/use": "^1.6.0",
+    "@videojs-player/vue": "^1.0.0",
     "dayjs": "^1.11.13",
     "swiper": "^11.2.6",
     "vant": "^4.9.18",
     "vconsole": "^3.15.1",
+    "video.js": "^7.21.7",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "weixin-js-sdk": "^1.6.5"
--- a/src/components.d.ts
View file @ac9b3c9
+++ b/src/components.d.ts
View file @ac9b3c9
@@ -39,5 +39,6 @@ declare module 'vue' {
     VanTab: typeof import('vant/es')['Tab']
     VanTabs: typeof import('vant/es')['Tabs']
     VanUploader: typeof import('vant/es')['Uploader']
+    VideoPlayer: typeof import('./components/ui/VideoPlayer.vue')['default']
   }
 }
--- a/src/components/ui/VideoPlayer.vue 0 → 100644
View file @ac9b3c9
+++ b/src/components/ui/VideoPlayer.vue 0 → 100644
View file @ac9b3c9
+<!--
+ * @Date: 2025-03-24 15:13:35
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-24 15:13:37
+ * @FilePath: /mlaj/src/components/ui/VideoPlayer.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="video-player-container">
+    <video
+      ref="videoRef"
+      class="video-js vjs-default-skin"
+      controls
+      preload="auto"
+      width="100%"
+      height="100%"
+    >
+      <source :src="videoUrl" type="video/mp4" />
+    </video>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue'
+import videojs from 'video.js'
+import 'video.js/dist/video-js.css'
+
+const props = defineProps({
+  videoUrl: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['onPlay', 'onPause'])
+const videoRef = ref(null)
+let player = null
+
+onMounted(() => {
+  player = videojs(videoRef.value, {
+    fluid: true,
+    controls: true,
+    preload: 'auto',
+    responsive: true
+  })
+
+  player.on('play', () => {
+    emit('onPlay')
+  })
+
+  player.on('pause', () => {
+    emit('onPause')
+  })
+})
+
+onBeforeUnmount(() => {
+  if (player) {
+    player.dispose()
+  }
+})
+
+defineExpose({
+  pause() {
+    if (player) {
+      player.pause()
+    }
+  }
+})
+</script>
+
+<style scoped>
+.video-player-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>
--- a/src/views/HomePage.vue
View file @ac9b3c9
+++ b/src/views/HomePage.vue
View file @ac9b3c9
 <!--
  * @Date: 2025-03-20 19:55:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-21 09:35:57
+ * @LastEditTime: 2025-03-24 15:14:00
  * @FilePath: /mlaj/src/views/HomePage.vue
  * @Description: 文件描述
 -->
@@ -443,30 +443,41 @@
               <div class="space-y-4">
                 <div
                   v-for="(item, index) in [
-                    { title: '亲子沟通的艺术', views: '1.2万', duration: '08:25', image: 'https://cdn.ipadbiz.cn/mlaj/images/video-1.jpg' },
+                    { title: '亲子沟通的艺术', views: '1.2万', duration: '08:25', image: 'https://cdn.ipadbiz.cn/mlaj/images/video-1.jpg', video_url: 'http://vjs.zencdn.net/v/oceans.mp4' },
-                    { title: '如何做好家庭教育', views: '8千', duration: '12:40', image: 'https://cdn.ipadbiz.cn/mlaj/images/video-2.jpg' },
+                    { title: '如何做好家庭教育', views: '8千', duration: '12:40', image: 'https://cdn.ipadbiz.cn/mlaj/images/video-2.jpg', video_url: 'http://vjs.zencdn.net/v/oceans.mp4' },
-                    { title: '孩子营养餐制作指南', views: '5千', duration: '15:18', image: 'https://cdn.ipadbiz.cn/mlaj/images/video-3.jpg' }
+                    { title: '孩子营养餐制作指南', views: '5千', duration: '15:18', image: 'https://cdn.ipadbiz.cn/mlaj/images/video-3.jpg', video_url: 'http://vjs.zencdn.net/v/oceans.mp4' }
                   ]"
                   :key="index"
                   class="relative rounded-xl overflow-hidden shadow-md h-48"
                 >
-                  <img
+                  <template v-if="activeVideoIndex !== index">
-                    :src="item.image"
+                    <img
-                    :alt="item.title"
+                      :src="item.image"
-                    class="w-full h-full object-cover"
+                      :alt="item.title"
-                    @error="handleImageError"
+                      class="w-full h-full object-cover"
-                  />
+                      @error="handleImageError"
-                  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/70 flex flex-col justify-end p-4">
+                    />
-                    <h4 class="text-white font-medium mb-1">{{ item.title }}</h4>
+                    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/70 flex flex-col justify-end p-4">
-                    <div class="flex justify-between items-center">
+                      <h4 class="text-white font-medium mb-1">{{ item.title }}</h4>
-                      <p class="text-white/80 text-xs">{{ item.views }}次播放 · {{ item.duration }}</p>
+                      <div class="flex justify-between items-center">
-                      <button class="bg-white/20 backdrop-blur-sm p-2 rounded-full">
+                        <p class="text-white/80 text-xs">{{ item.views }}次播放 · {{ item.duration }}</p>
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor">
+                        <button
-                          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+                          class="bg-white/20 backdrop-blur-sm p-2 rounded-full"
-                        </svg>
+                          @click="playVideo(index, item.video_url)"
-                      </button>
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+                          </svg>
+                        </button>
+                      </div>
                     </div>
-                  </div>
+                  </template>
+                  <VideoPlayer
+                    v-else
+                    :video-url="item.video_url"
+                    ref="videoPlayerRefs"
+                    @onPlay="handleVideoPlay(index)"
+                  />
                 </div>
               </div>
             </div>
@@ -486,12 +497,29 @@ import CourseCard from '@/components/ui/CourseCard.vue'
 import LiveStreamCard from '@/components/ui/LiveStreamCard.vue'
 import ActivityCard from '@/components/ui/ActivityCard.vue'
 import SummerCampCard from '@/components/ui/SummerCampCard.vue'
+import VideoPlayer from '@/components/ui/VideoPlayer.vue'
 import { courses, liveStreams, activities, checkInTypes, userRecommendations } from '@/utils/mockData'
 import { useTitle } from '@vueuse/core'
 import { useAuth } from '@/contexts/auth'
 import { showToast } from 'vant'
 import 'vant/lib/toast/style'
+const activeVideoIndex = ref(null);
+const videoPlayerRefs = ref([]);
+
+const playVideo = (index, videoUrl) => {
+  if (activeVideoIndex.value !== null && activeVideoIndex.value !== index) {
+    videoPlayerRefs.value[activeVideoIndex.value]?.pause();
+  }
+  activeVideoIndex.value = index;
+};
+
+const handleVideoPlay = (index) => {
+  if (activeVideoIndex.value !== null && activeVideoIndex.value !== index) {
+    videoPlayerRefs.value[activeVideoIndex.value]?.pause();
+  }
+};
+
 const $route = useRoute()
 const $router = useRouter()
 useTitle($route.meta.title)