一刻短剧项目视频优化计划

// ❌ 问题：while循环串行获取视频URL
while (videoInfoList.value.length < VIDEO_LIST_LEBGTH) {
    const videoInfo = await randomList.value.pop()
    const add = await getVideoAdd(videoInfo.eid)  // 串行请求
    videoInfo.url2 = add
    videoInfoList.value.push(videoInfo)
}

import { getRandom } from '@/apis/play'
import { getVideoAddress } from '@/apis/play'
import { ref } from 'vue'
import { createMessage } from './message'
import { getAllEpisode } from '@/apis/play'

const VIDEO_LIST_LENGTH = 5

const randomList = ref([])
const nextList = ref([])
const videoInfoList = ref([])

/**
 * @description 批量获取随机视频列表
 * @param {Number} page 页码
 * @param {Number} limit 每页数量
 */
const getRandomList = async (page = 1, limit = 15) => {
    let res = await getRandom(page, limit)
    randomList.value = res.data.data.data
}

/**
 * @description 获取下一批剧集列表
 * @param {Number} vid 视频ID
 * @param {Number} page 页码
 * @param {Number} limit 每页数量
 */
const getNextList = async (vid, page = 1, limit = 1000) => {
    let res = await getAllEpisode(vid, page, limit)
    nextList.value = res.data.data.data.reverse()
}

/**
 * @description 获取视频播放地址
 * @param {Number} eid 剧集ID
 * @returns {Promise<String>} 视频URL
 */
const getVideoAdd = async (eid) => {
    try {
        let res = await getVideoAddress(eid)
        return res.data.data.url
    } catch (error) {
        console.error(`获取视频地址失败 eid=${eid}:`, error)
        return null
    }
}

let preVid = 0
let preEid = 0

/**
 * @description 并行更新视频队列（优化版）
 * @param {Number} vid 视频ID，用于追剧模式
 * @param {Number} eid 剧集ID，用于追剧模式
 * @returns {Promise<Array>} 视频信息列表
 */
const updateVideoList = async (vid, eid) => {
    const isRandom = !vid || !eid

    // 1. 确保列表数据已加载
    if (isRandom) {
        if (randomList.value.length === 0) {
            await getRandomList()
        }
    } else {
        if (preEid !== eid || preVid !== vid || nextList.value.length === 0) {
            preEid = eid
            preVid = vid
            await getNextList(vid)
            const temp = nextList.value.filter((value) => value.eid >= eid)
            nextList.value = temp
        }
    }

    // 2. 并行获取所有视频地址（核心优化点）
    const sourceList = isRandom ? randomList.value : nextList.value
    const videosToLoad = sourceList.slice(0, VIDEO_LIST_LENGTH)

    // 使用 Promise.all 并行请求
    const videoPromises = videosToLoad.map(async (videoInfo) => {
        const url = await getVideoAdd(videoInfo.eid)
        return {
            ...videoInfo,
            url2: url
        }
    })

    // 等待所有请求完成，失败的返回 null
    const results = await Promise.allSettled(videoPromises)

    // 3. 过滤失败的请求，只保留成功获取URL的视频
    videoInfoList.value = results
        .filter(result => result.status === 'fulfilled' && result.value.url2)
        .map(result => result.value)

    // 4. 如果成功获取的视频不足，补充加载
    if (videoInfoList.value.length < VIDEO_LIST_LENGTH && sourceList.length > VIDEO_LIST_LENGTH) {
        const additionalCount = VIDEO_LIST_LENGTH - videoInfoList.value.length
        const additionalVideos = sourceList.slice(VIDEO_LIST_LENGTH, VIDEO_LIST_LENGTH + additionalCount)

        const additionalPromises = additionalVideos.map(async (videoInfo) => {
            const url = await getVideoAdd(videoInfo.eid)
            return {
                ...videoInfo,
                url2: url
            }
        })

        const additionalResults = await Promise.allSettled(additionalPromises)
        const additionalValid = additionalResults
            .filter(result => result.status === 'fulfilled' && result.value.url2)
            .map(result => result.value)

        videoInfoList.value.push(...additionalValid)
    }

    // 5. 显示加载结果
    setTimeout(() => {
        if (videoInfoList.value.length > 0) {
            createMessage(`加载成功 ${videoInfoList.value.length} 个视频`)
        } else {
            createMessage('加载失败，请重试')
        }
    }, 500)

    return videoInfoList.value
}

export default updateVideoList

// 使用 requestVideoFrameCallback 优化解码时机
const optimizeDecoding = (videoElement) => {
    if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
        let frameCount = 0

        const onFrame = (now, metadata) => {
            frameCount++

            // 前3帧优先解码，之后降低优先级
            if (frameCount <= 3) {
                videoElement.style.contentVisibility = 'auto'
            } else {
                videoElement.style.contentVisibility = 'visible'
            }

            videoElement.requestVideoFrameCallback(onFrame)
        }

        videoElement.requestVideoFrameCallback(onFrame)
    }
}

// ❌ 问题：每次滚动都读取 getBoundingClientRect() 触发重排
const scrollToCurrent = () => {
    const videoElementRef = videoElement.value.getBoundingClientRect()  // 强制重排
    const videoHeight = videoElementRef.height
    videoElement.value.scrollTo({
        top: curIndex.value * videoHeight,  // 修改 scrollTop 触发重排
        behavior: 'smooth'
    })
}

// 使用 requestAnimationFrame 批量处理DOM更新
const batchDOMUpdates = (() => {
    let pendingUpdates = []
    let rafId = null

    const flush = () => {
        pendingUpdates.forEach(update => update())
        pendingUpdates = []
        rafId = null
    }

    return (updateFn) => {
        pendingUpdates.push(updateFn)
        if (!rafId) {
            rafId = requestAnimationFrame(flush)
        }
    }
})()

// 使用示例
batchDOMUpdates(() => {
    playerElement.style.transform = `translateY(${newPosition}px)`
})

/**
 * 视频预加载管理器
 * 根据网络状况和用户行为智能预加载视频
 */
class VideoPreloadManager {
    constructor() {
        // 缓存存储
        this.cache = new Map()
        this.priorityQueue = []

        // 配置参数
        this.config = {
            maxCacheSize: 3,        // 最大缓存视频数
            preloadRange: 2,        // 预加载范围（前后各N个）
            chunkSize: 1024 * 512   // 预加载分片大小 (512KB)
        }

        // 网络状态
        this.networkStatus = {
            effectiveType: '4g',
            saveData: false,
            downlink: 10
        }

        // 监听网络变化
        this.initNetworkListener()
    }

    /**
     * 初始化网络状态监听
     */
    initNetworkListener() {
        const connection = navigator.connection ||
                          navigator.mozConnection ||
                          navigator.webkitConnection

        if (connection) {
            this.updateNetworkStatus(connection)
            connection.addEventListener('change', () => {
                this.updateNetworkStatus(connection)
            })
        }
    }

    /**
     * 更新网络状态并调整策略
     */
    updateNetworkStatus(connection) {
        this.networkStatus = {
            effectiveType: connection.effectiveType || '4g',
            saveData: connection.saveData || false,
            downlink: connection.downlink || 10
        }

        // 根据网络调整策略
        this.adjustStrategy()
    }

    /**
     * 根据网络状态调整预加载策略
     */
    adjustStrategy() {
        const { effectiveType, saveData } = this.networkStatus

        if (saveData) {
            // 省流模式：只预加载当前视频
            this.config.maxCacheSize = 1
            this.config.preloadRange = 0
        } else {
            switch (effectiveType) {
                case '4g':
                    this.config.maxCacheSize = 3
                    this.config.preloadRange = 2
                    break
                case '3g':
                    this.config.maxCacheSize = 2
                    this.config.preloadRange = 1
                    break
                case '2g':
                case 'slow-2g':
                    this.config.maxCacheSize = 1
                    this.config.preloadRange = 0
                    break
                default:
                    this.config.maxCacheSize = 2
                    this.config.preloadRange = 1
            }
        }

        console.log(`[PreloadManager] 网络: ${effectiveType}, 缓存: ${this.config.maxCacheSize}, 范围: ${this.config.preloadRange}`)

        // 清理超出限制的缓存
        this.cleanupCache()
    }

    /**
     * 预加载视频
     * @param {Object} videoInfo 视频信息
     * @param {Number} priority 优先级（0:当前, 1:下一个, 2:其他）
     */
    async preload(videoInfo, priority = 2) {
        const { eid, url2 } = videoInfo

        // 已缓存或优先级过低
        if (this.cache.has(eid) || priority > this.config.preloadRange) {
            return
        }

        // 取消低优先级预加载
        this.cancelLowPriority(priority)

        try {
            // 创建 AbortController 用于取消
            const controller = new AbortController()

            // 存储预加载信息
            this.cache.set(eid, {
                videoInfo,
                priority,
                controller,
                status: 'loading',
                blob: null
            })

            this.updatePriorityQueue()

            // 根据优先级决定预加载策略
            if (priority === 0) {
                // 当前视频：完整加载
                await this.fullPreload(eid, url2, controller)
            } else {
                // 其他视频：分片预加载（前512KB）
                await this.chunkPreload(eid, url2, controller)
            }

        } catch (error) {
            if (error.name !== 'AbortError') {
                console.error(`[PreloadManager] 预加载失败 eid=${eid}:`, error)
            }
            this.cache.delete(eid)
        }
    }

    /**
     * 完整预加载
     */
    async fullPreload(eid, url, controller) {
        const response = await fetch(url, {
            signal: controller.signal
        })

        const blob = await response.blob()
        const cacheEntry = this.cache.get(eid)

        if (cacheEntry) {
            cacheEntry.status = 'complete'
            cacheEntry.blob = blob
            cacheEntry.objectUrl = URL.createObjectURL(blob)
        }
    }

    /**
     * 分片预加载（只加载开头部分）
     */
    async chunkPreload(eid, url, controller) {
        const response = await fetch(url, {
            signal: controller.signal,
            headers: {
                'Range': `bytes=0-${this.config.chunkSize}`
            }
        })

        const blob = await response.blob()
        const cacheEntry = this.cache.get(eid)

        if (cacheEntry) {
            cacheEntry.status = 'partial'
            cacheEntry.blob = blob
            cacheEntry.objectUrl = URL.createObjectURL(blob)
        }
    }

    /**
     * 取消低优先级预加载
     */
    cancelLowPriority(currentPriority) {
        this.cache.forEach((entry, eid) => {
            if (entry.priority > currentPriority && entry.controller) {
                entry.controller.abort()
                this.cache.delete(eid)
            }
        })
    }

    /**
     * 更新优先级队列
     */
    updatePriorityQueue() {
        this.priorityQueue = Array.from(this.cache.entries())
            .sort((a, b) => a[1].priority - b[1].priority)
    }

    /**
     * 清理缓存
     */
    cleanupCache() {
        while (this.cache.size > this.config.maxCacheSize) {
            // 删除优先级最低的
            const lowestPriority = Array.from(this.cache.entries())
                .sort((a, b) => b[1].priority - a[1].priority)[0]

            if (lowestPriority) {
                const [eid, entry] = lowestPriority
                if (entry.controller) {
                    entry.controller.abort()
                }
                if (entry.objectUrl) {
                    URL.revokeObjectURL(entry.objectUrl)
                }
                this.cache.delete(eid)
            }
        }
    }

    /**
     * 获取预加载的视频URL
     */
    getPreloadedUrl(eid) {
        const entry = this.cache.get(eid)
        return entry?.objectUrl || null
    }

    /**
     * 释放资源
     */
    dispose() {
        this.cache.forEach((entry) => {
            if (entry.controller) {
                entry.controller.abort()
            }
            if (entry.objectUrl) {
                URL.revokeObjectURL(entry.objectUrl)
            }
        })
        this.cache.clear()
        this.priorityQueue = []
    }
}

// 单例导出
let instance = null
export const getPreloadManager = () => {
    if (!instance) {
        instance = new VideoPreloadManager()
    }
    return instance
}

export default VideoPreloadManager

// Video.vue
import { getPreloadManager } from '@/utils/videoPreloadManager'

const preloadManager = getPreloadManager()

// 监听当前索引变化，调整预加载
watch(curIndex, (newIndex) => {
    const videos = videoInfoList.value

    // 预加载当前视频（高优先级）
    if (videos[newIndex]) {
        preloadManager.preload(videos[newIndex], 0)
    }

    // 预加载下一个视频
    if (videos[newIndex + 1]) {
        preloadManager.preload(videos[newIndex + 1], 1)
    }

    // 预加载上一个视频
    if (videos[newIndex - 1]) {
        preloadManager.preload(videos[newIndex - 1], 1)
    }

    // 清理已远离的视频缓存
    videos.forEach((video, index) => {
        const distance = Math.abs(index - newIndex)
        if (distance > 2) {
            // 从缓存中移除
        }
    })
})

// 使用 IntersectionObserver 实现可视区加载
const useLazyVideo = (containerRef) => {
    const videoObserver = new IntersectionObserver(
        (entries) => {
            entries.forEach((entry) => {
                const video = entry.target
                const videoId = video.dataset.eid

                if (entry.isIntersecting) {
                    // 进入视口
                    const preloadedUrl = preloadManager.getPreloadedUrl(videoId)
                    if (preloadedUrl && !video.src) {
                        video.src = preloadedUrl
                        video.load()
                    }
                    video.play().catch(() => {}) // 自动播放可能被阻止
                } else {
                    // 离开视口
                    video.pause()
                    // 延迟释放资源
                    setTimeout(() => {
                        if (!video.isIntersecting) {
                            video.removeAttribute('src')
                            video.load()
                        }
                    }, 5000)
                }
            })
        },
        {
            root: containerRef.value,
            rootMargin: '100%',  // 提前一屏开始加载
            threshold: 0.5       // 50%可见时触发
        }
    )

    return videoObserver
}

// utils/playerPool.js
/**
 * 播放器池 - 复用 Video.js 实例
 */
class PlayerPool {
    constructor(size = 3) {
        this.size = size
        this.pool = []
        this.inUse = new Map()
        this.waitingQueue = []

        // 预创建播放器实例
        this.preCreate()
    }

    /**
     * 预创建播放器实例
     */
    preCreate() {
        for (let i = 0; i < this.size; i++) {
            const container = document.createElement('div')
            container.className = 'video-pool-slot'
            container.style.display = 'none'
            document.body.appendChild(container)

            const player = window.videojs(container, {
                aspectRatio: '9:16',
                controls: true,
                preload: 'none'
            })

            this.pool.push({
                id: i,
                player,
                container,
                available: true
            })
        }
    }

    /**
     * 获取可用播放器
     */
    acquire(videoId) {
        // 检查是否已分配
        if (this.inUse.has(videoId)) {
            return this.inUse.get(videoId)
        }

        // 查找可用播放器
        const available = this.pool.find(p => p.available)

        if (available) {
            available.available = false
            this.inUse.set(videoId, available)
            return available
        }

        // 无可用播放器，加入等待队列
        return new Promise((resolve) => {
            this.waitingQueue.push({ videoId, resolve })
        })
    }

    /**
     * 释放播放器
     */
    release(videoId) {
        const playerSlot = this.inUse.get(videoId)

        if (playerSlot) {
            // 重置播放器状态
            playerSlot.player.pause()
            playerSlot.player.src('')
            playerSlot.player.reset()
            playerSlot.container.style.display = 'none'
            playerSlot.available = true

            this.inUse.delete(videoId)

            // 处理等待队列
            if (this.waitingQueue.length > 0) {
                const { videoId: nextId, resolve } = this.waitingQueue.shift()
                const nextSlot = this.acquire(nextId)
                resolve(nextSlot)
            }
        }
    }

    /**
     * 销毁所有播放器
     */
    dispose() {
        this.pool.forEach(({ player, container }) => {
            player.dispose()
            container.remove()
        })
        this.pool = []
        this.inUse.clear()
        this.waitingQueue = []
    }
}

export default new PlayerPool(3)

// utils/firstFrameOptimizer.js
/**
 * 首帧优化器
 * 使用视频帧预览和渐进式加载提升感知性能
 */
export class FirstFrameOptimizer {
    constructor() {
        this.frameCache = new Map()
        this.canvas = document.createElement('canvas')
        this.ctx = this.canvas.getContext('2d')
    }

    /**
     * 提取视频首帧作为封面
     */
    async extractFrame(videoUrl) {
        if (this.frameCache.has(videoUrl)) {
            return this.frameCache.get(videoUrl)
        }

        return new Promise((resolve, reject) => {
            const video = document.createElement('video')
            video.crossOrigin = 'anonymous'
            video.preload = 'metadata'
            video.muted = true

            video.onloadeddata = () => {
                this.canvas.width = video.videoWidth
                this.canvas.height = video.videoHeight
                this.ctx.drawImage(video, 0, 0)

                const dataUrl = this.canvas.toDataURL('image/jpeg', 0.8)
                this.frameCache.set(videoUrl, dataUrl)
                resolve(dataUrl)
            }

            video.onerror = reject
            video.src = videoUrl
            video.currentTime = 0.1  // 跳转到第一帧
        })
    }

    /**
     * 创建模糊预览图（LQIP）
     */
    createBlurPreview(imageUrl, blurRadius = 20) {
        return new Promise((resolve) => {
            const img = new Image()
            img.crossOrigin = 'anonymous'
            img.onload = () => {
                this.canvas.width = 50  // 缩小尺寸
                this.canvas.height = 50 * (img.height / img.width)
                this.ctx.filter = `blur(${blurRadius}px)`
                this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)

                resolve(this.canvas.toDataURL('image/jpeg', 0.5))
            }
            img.src = imageUrl
        })
    }
}

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useProgressStore = defineStore('progress', () => {
    // 播放记录
    const records = ref({})

    // 最大保存记录数
    const MAX_RECORDS = 100

    /**
     * 保存播放进度
     */
    const saveProgress = (vid, eid, currentTime, duration) => {
        const key = `${vid}_${eid}`

        records.value[key] = {
            currentTime,
            duration,
            progress: duration > 0 ? (currentTime / duration) : 0,
            timestamp: Date.now(),
            vid,
            eid
        }

        cleanup()
    }

    /**
     * 获取播放进度
     */
    const getProgress = (vid, eid) => {
        const key = `${vid}_${eid}`
        const record = records.value[key]

        if (!record) return 0

        // 如果已经看完95%以上，从头开始
        if (record.progress > 0.95) {
            return 0
        }

        // 跳过片头（如果从头开始且片头小于10秒）
        if (record.currentTime < 10) {
            return 0
        }

        return record.currentTime
    }

    /**
     * 清理旧记录
     */
    const cleanup = () => {
        const entries = Object.entries(records.value)

        if (entries.length > MAX_RECORDS) {
            // 按时间排序，删除最早的
            const sorted = entries.sort((a, b) => a[1].timestamp - b[1].timestamp)
            const toDelete = sorted.slice(0, entries.length - MAX_RECORDS)

            toDelete.forEach(([key]) => {
                delete records.value[key]
            })
        }
    }

    /**
     * 获取最近观看列表
     */
    const recentWatched = computed(() => {
        return Object.values(records.value)
            .sort((a, b) => b.timestamp - a.timestamp)
            .slice(0, 20)
    })

    /**
     * 清除记录
     */
    const clearProgress = (vid, eid) => {
        const key = `${vid}_${eid}`
        delete records.value[key]
    }

    return {
        records,
        saveProgress,
        getProgress,
        recentWatched,
        clearProgress
    }
}, {
    persist: {
        storage: localStorage,
        paths: ['records']
    }
})