refactor: 更新视频播放器配置和视频链接

调整视频播放器的配置项，优化代码格式，并更新视频链接以使用新的资源地址

@@ -12,79 +12,80 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue'
-import { VideoPlayer } from '@videojs-player/vue'
-import videojs from 'video.js'
-import 'video.js/dist/video-js.css'
+import { ref, computed, onMounted, onBeforeUnmount, defineProps, defineEmits } from "vue";
+import { VideoPlayer } from "@videojs-player/vue";
+import videojs from "video.js";
+import "video.js/dist/video-js.css";
 
 const props = defineProps({
   options: {
     type: Object,
     required: false,
-    default: () => ({})
+    default: () => ({}),
   },
   videoUrl: {
     type: String,
-    required: true
-  }
-})
+    required: true,
+  },
+});
 
-const emit = defineEmits(['onPlay', 'onPause'])
-const videoRef = ref(null)
-const player = ref(null)
-const state = ref(null)
+const emit = defineEmits(["onPlay", "onPause"]);
+const videoRef = ref(null);
+const player = ref(null);
+const state = ref(null);
 
 const videoOptions = computed(() => ({
-  fluid: true,
   controls: true,
-  preload: 'auto',
+  preload: "auto",
   responsive: true,
   autoplay: props.options?.autoplay || false,
-  sources: [{
+  sources: [
+    {
       src: props.videoUrl,
-    type: 'video/mp4'
-  }],
-  onPlay: () => emit('onPlay'),
-  onPause: () => emit('onPause'),
+      type: "video/mp4",
+    },
+  ],
+  onPlay: () => emit("onPlay"),
+  onPause: () => emit("onPause"),
   userActions: {
     hotkeys: true,
-    doubleClick: true
+    doubleClick: true,
   },
   controlBar: {
     progressControl: {
       seekBar: {
         mouseTimeDisplay: {
-          keepTooltipsInside: true
-        }
-      }
-    }
+          keepTooltipsInside: true,
+        },
+      },
     },
-  ...props.options
-}))
+  },
+  ...props.options,
+}));
 
 const onPlayerReady = (instance) => {
-  player = instance
-}
+  player = instance;
+};
 
 const handleMounted = (payload) => {
-  console.log('Advanced player mounted', payload)
-  state.value = payload.state
-  player.value = payload.player
-}
+  console.log("Advanced player mounted", payload);
+  state.value = payload.state;
+  player.value = payload.player;
+};
 
 onBeforeUnmount(() => {
   if (videoRef.value?.$player) {
-    videoRef.value.$player.dispose()
+    videoRef.value.$player.dispose();
   }
-})
+});
 
 defineExpose({
   pause() {
     if (videoRef.value?.$player) {
-      videoRef.value.$player.pause()
-    }
+      videoRef.value.$player.pause();
     }
-})
+  },
+});
 </script>
 
 <style scoped>
@@ -93,4 +94,15 @@ defineExpose({
   height: 100%;
   position: relative;
 }
+
+.video-player {
+  width: 100%;
+  height: 100%;
+  display: block;
+  aspect-ratio: 16/9;
+}
+
+.video-player.loading {
+  opacity: 0.6;
+}
 </style>

 <!--
  * @Date: 2025-03-20 19:55:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-24 15:14:00
+ * @LastEditTime: 2025-03-24 16:17:17
  * @FilePath: /mlaj/src/views/HomePage.vue
  * @Description: 文件描述
 -->
@@ -443,9 +443,9 @@
               <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', 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', 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', video_url: 'http://vjs.zencdn.net/v/oceans.mp4' }
+                    { title: '亲子沟通的艺术', views: '1.2万', duration: '08:25', image: 'https://cdn.ipadbiz.cn/mlaj/images/video-1.jpg', video_url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4' },
+                    { title: '如何做好家庭教育', views: '8千', duration: '12:40', image: 'https://cdn.ipadbiz.cn/mlaj/images/video-2.jpg', video_url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4' },
+                    { title: '孩子营养餐制作指南', views: '5千', duration: '15:18', image: 'https://cdn.ipadbiz.cn/mlaj/images/video-3.jpg', video_url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4' }
                   ]"
                   :key="index"
                   class="relative rounded-xl overflow-hidden shadow-md h-48"