feat(视频播放器): 添加倍速播放功能并优化控件样式

@@ -51,6 +51,8 @@ const videoOptions = computed(() => ({
   preload: "auto",
   preload: "auto",
   responsive: true,
   responsive: true,
   autoplay: props.autoplay,
   autoplay: props.autoplay,
+  // 启用倍速播放功能
+  playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
   sources: [
   sources: [
     {
     {
       src: props.videoUrl,
       src: props.videoUrl,
@@ -172,4 +174,154 @@ defineExpose({
 :deep(.vjs-big-play-button) {
 :deep(.vjs-big-play-button) {
   display: none !important;
   display: none !important;
 }
 }
+
+/* 倍速播放控件样式优化 */
+:deep(.vjs-playback-rate) {
+  order: 7;
+  position: relative;
+  display: flex !important;
+  align-items: center;
+  z-index: 10;
+  margin-right: 12px;
+}
+
+/* 隐藏可能存在的图标 */
+:deep(.vjs-playback-rate .vjs-icon-chapters) {
+  display: none !important;
+}
+
+:deep(.vjs-playback-rate .vjs-playback-rate-value) {
+  font-size: 1.5em;
+  line-height: 2;
+  color: #fff;
+  background: transparent;
+  border-radius: 4px;
+  padding: 0 8px;
+  margin: 0;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  min-width: auto;
+  text-align: center;
+  width: auto;
+  display: inline-block;
+}
+
+:deep(.vjs-playback-rate:hover .vjs-playback-rate-value) {
+  background: transparent;
+  transform: scale(1.05);
+}
+
+/* 菜单容器优化 - 解决遮挡问题 */
+:deep(.vjs-playback-rate .vjs-menu) {
+  background: rgba(0, 0, 0, 0.95);
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(15px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 8px;
+  min-width: 80px;
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 1000;
+}
+
+/* 确保菜单在视口内显示 */
+:deep(.vjs-playback-rate .vjs-menu.vjs-lock-showing) {
+  display: block !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+:deep(.vjs-playback-rate .vjs-menu-content) {
+  padding: 4px 0;
+}
+
+:deep(.vjs-playback-rate .vjs-menu-item) {
+  color: #fff;
+  padding: 10px 16px;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  border-radius: 4px;
+  margin: 2px 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  text-align: center;
+}
+
+:deep(.vjs-playback-rate .vjs-menu-item:hover) {
+  background: rgba(255, 255, 255, 0.15);
+  transform: translateX(2px);
+}
+
+:deep(.vjs-playback-rate .vjs-menu-item.vjs-selected) {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  font-weight: 600;
+}
+
+/* 移动端优化 */
+@media (max-width: 768px) {
+  :deep(.vjs-playback-rate) {
+    display: flex !important;
+    visibility: visible !important;
+    margin-right: 8px;
+  }
+  
+  :deep(.vjs-playback-rate .vjs-playback-rate-value) {
+    font-size: 1.3em;
+    padding: 0 6px;
+    min-width: auto;
+    height: 36px;
+    line-height: 36px;
+    width: auto;
+    margin: 0;
+  }
+  
+  :deep(.vjs-playback-rate .vjs-menu) {
+    min-width: 100px;
+    max-height: 180px;
+    bottom: 120%;
+    right: -10px;
+  }
+  
+  :deep(.vjs-playback-rate .vjs-menu-item) {
+    padding: 12px 16px;
+    font-size: 16px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+/* 小屏幕设备进一步优化 */
+@media (max-width: 480px) {
+  :deep(.vjs-playback-rate) {
+    margin-right: 6px;
+  }
+  
+  :deep(.vjs-playback-rate .vjs-playback-rate-value) {
+    font-size: 1.2em;
+    padding: 0 4px;
+    min-width: auto;
+    height: 32px;
+    line-height: 32px;
+    width: auto;
+    margin: 0;
+  }
+  
+  :deep(.vjs-playback-rate .vjs-menu) {
+    min-width: 90px;
+    right: -5px;
+  }
+  
+  :deep(.vjs-playback-rate .vjs-menu-item) {
+    padding: 10px 12px;
+    font-size: 15px;
+    min-height: 40px;
+  }
+}
 </style>
 </style>