feat: 倍速定义

Author: Taois

dashboard/src/components/players/ArtVideoPlayer.vue

@@ -81,6 +81,9 @@ import { Message } from '@arco-design/web-vue'
 import { IconClose } from '@arco-design/web-vue/es/icon'
 import Artplayer from 'artplayer'
 import Hls from 'hls.js'
+
+// 配置自定义倍速选项
+Artplayer.PLAYBACK_RATE = [0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4, 5]
 import PlayerHeader from './PlayerHeader.vue'
 import SkipSettingsDialog from './SkipSettingsDialog.vue'
 import { useSkipSettings } from '@/composables/useSkipSettings'
@@ -161,7 +164,9 @@ const {
   closeSkipSettingsDialog,
   saveSkipSettings: saveSkipSettingsComposable,
   onUserSeekStart,
-  onUserSeekEnd
+  onUserSeekEnd,
+  onFullscreenChangeStart,
+  onFullscreenChangeEnd
 } = useSkipSettings({
   onSkipToNext: () => {
     if (autoNextEnabled.value && hasNextEpisode()) {
@@ -611,6 +616,14 @@ const initArtPlayer = async (url) => {
     // 监听全屏状态变化
     art.on('fullscreen', (isFullscreen) => {
       console.log('全屏状态变化:', isFullscreen)
+      
+      // 标记全屏状态开始变化
+      onFullscreenChangeStart()
+      
+      // 500ms后标记全屏状态变化结束
+      setTimeout(() => {
+        onFullscreenChangeEnd()
+      }, 500)
     })
 
     art.on('video:error', (err) => {

dashboard/src/components/players/VideoPlayer.vue

@@ -26,6 +26,28 @@
         您的浏览器不支持视频播放
       </video>
 
+      <!-- 倍速控制器 -->
+      <div class="speed-control">
+        <label for="speed-select">倍速：</label>
+        <select 
+          id="speed-select" 
+          v-model="currentSpeed" 
+          @change="changePlaybackRate"
+          class="speed-selector"
+        >
+          <option value="0.5">0.5x</option>
+          <option value="0.75">0.75x</option>
+          <option value="1">1x</option>
+          <option value="1.25">1.25x</option>
+          <option value="1.5">1.5x</option>
+          <option value="2">2x</option>
+          <option value="2.5">2.5x</option>
+          <option value="3">3x</option>
+          <option value="4">4x</option>
+          <option value="5">5x</option>
+        </select>
+      </div>
+      
       <!-- 自动下一集倒计时弹窗 -->
       <div v-if="showAutoNextDialog" class="auto-next-dialog">
         <div class="auto-next-content">
@@ -113,6 +135,7 @@ const showAutoNextDialog = ref(false)
 const autoNextCountdown = ref(10)
 const countdownTimer = ref(null)
 const isProcessingAutoNext = ref(false) // 防止重复触发自动连播
+const currentSpeed = ref(1) // 当前播放倍速
 
 // 检查是否有下一集
 const hasNextEpisode = () => {
@@ -208,6 +231,14 @@ const cancelAutoNext = () => {
   isProcessingAutoNext.value = false
 }
 
+// 改变播放倍速
+const changePlaybackRate = () => {
+  if (videoPlayer.value) {
+    videoPlayer.value.playbackRate = parseFloat(currentSpeed.value)
+    console.log('播放倍速已设置为:', currentSpeed.value)
+  }
+}
+
 // 链接类型判断函数
 const isDirectVideoLink = (url) => {
   if (!url) return false
@@ -748,6 +779,47 @@ onUnmounted(() => {
   background: #555;
 }
 
+/* 倍速控制器样式 */
+.speed-control {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 8px 12px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 10;
+}
+
+.speed-control label {
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.speed-selector {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 14px;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.speed-selector:hover {
+  background: white;
+  border-color: #23ade5;
+}
+
+.speed-selector:focus {
+  border-color: #23ade5;
+  box-shadow: 0 0 0 2px rgba(35, 173, 229, 0.2);
+}
+
 
 
 /* 响应式设计 */

dashboard/src/composables/useSkipSettings.js

@@ -28,9 +28,13 @@ export function useSkipSettings(options = {}) {
   const skipOutroTimer = ref(null)
   const lastSkipTime = ref(0) // 记录上次跳过的时间戳，用于防抖
 
-  // 用户交互状态
-  const userSeeking = ref(false) // 用户是否正在拖动进度条
-  const lastUserSeekTime = ref(0) // 上次用户拖动的时间戳
+  //// 用户交互状态
+  const userSeeking = ref(false)
+  const lastUserSeekTime = ref(0)
+  
+  // 全屏状态跟踪
+  const isFullscreenChanging = ref(false)
+  const lastFullscreenChangeTime = ref(0) // 上次用户拖动的时间戳
 
   // 计算属性
   const skipEnabled = computed(() => {
@@ -119,6 +123,18 @@ export function useSkipSettings(options = {}) {
       return
     }
 
+    // 检查是否正在全屏切换或刚刚切换过（2秒内）
+    if (isFullscreenChanging.value || (lastFullscreenChangeTime.value > 0 && now - lastFullscreenChangeTime.value < 2000)) {
+      console.log('正在全屏切换或刚刚切换过，跳过自动片头跳过')
+      return
+    }
+    
+    // 检查是否正在全屏切换或刚刚切换过（2秒内）
+    if (isFullscreenChanging.value || (lastFullscreenChangeTime.value > 0 && now - lastFullscreenChangeTime.value < 2000)) {
+      console.log('正在全屏切换或刚刚切换过，跳过自动片头跳过')
+      return
+    }
+    
     // 立即跳过模式：如果当前时间很小（小于等于1秒）且在片头跳过范围内，立即跳过
     if (currentTime <= 1 && currentTime <= skipIntroSeconds.value) {
       console.log(`立即跳过片头：从 ${currentTime} 秒跳转到 ${skipIntroSeconds.value} 秒`)
@@ -163,6 +179,12 @@ export function useSkipSettings(options = {}) {
       return
     }
 
+    // 检查是否正在全屏切换或刚刚切换过（2秒内）
+    if (isFullscreenChanging.value || (lastFullscreenChangeTime.value > 0 && now - lastFullscreenChangeTime.value < 2000)) {
+      console.log('正在全屏切换或刚刚切换过，跳过自动片头跳过')
+      return
+    }
+    
     // 防抖：如果距离上次跳过不足1秒，则忽略（但如果是新视频，lastSkipTime为0，允许跳过）
     // 减少防抖时间，提高响应速度
     if (lastSkipTime.value > 0 && now - lastSkipTime.value < 1000) {
@@ -252,6 +274,10 @@ export function useSkipSettings(options = {}) {
     userSeeking.value = false
     lastUserSeekTime.value = 0
 
+    // 重置全屏状态
+    isFullscreenChanging.value = false
+    lastFullscreenChangeTime.value = 0
+    
     // 清除片尾跳过定时器（如果存在）
     if (skipOutroTimer.value) {
       clearTimeout(skipOutroTimer.value)
@@ -260,22 +286,39 @@ export function useSkipSettings(options = {}) {
   }
 
   /**
-   * 标记用户开始拖动进度条
+   * 用户开始拖动进度条
    */
   const onUserSeekStart = () => {
     userSeeking.value = true
     console.log('用户开始拖动进度条')
   }
 
   /**
-   * 标记用户结束拖动进度条
+   * 用户结束拖动进度条
    */
   const onUserSeekEnd = () => {
     userSeeking.value = false
     lastUserSeekTime.value = Date.now()
     console.log('用户结束拖动进度条')
   }
 
+  /**
+   * 全屏状态开始变化
+   */
+  const onFullscreenChangeStart = () => {
+    isFullscreenChanging.value = true
+    console.log('全屏状态开始变化')
+  }
+
+  /**
+   * 全屏状态变化结束
+   */
+  const onFullscreenChangeEnd = () => {
+    isFullscreenChanging.value = false
+    lastFullscreenChangeTime.value = Date.now()
+    console.log('全屏状态变化结束')
+  }
+
   /**
    * 初始化片头片尾设置
    */
@@ -338,6 +381,8 @@ export function useSkipSettings(options = {}) {
     closeSkipSettingsDialog,
     cleanup,
     onUserSeekStart,
-    onUserSeekEnd
+    onUserSeekEnd,
+    onFullscreenChangeStart,
+    onFullscreenChangeEnd
   }
 }