视频播放器交互设计与性能优化 - 面试准备文档

player = window.videojs(props.videoInfo, {
    height: '1415',
    width: '795.94',
    aspectRatio: '9:16',        // 竖屏比例
    controlBar: {
        fullscreenToggle: false,   // 禁用全屏按钮
        playToggle: false,         // 禁用播放按钮（我们用点击画面控制）
        volumeMenuButton: false,   // 禁用音量按钮（侧边栏自己控制）
        timeDivider: false,
        volumePanel: false,
        pictureInPictureToggle: false,
        remainingTimeDisplay: false,
    },
    userAction: { click: true, doubleClick: false },
    controls: true,
})

// 伪代码逻辑
onTouchStart → 记录起点 (startX, startY)
onTouchMove  → 计算移动距离，距离 > 30px → 标记 isDragging = true
onTouchEnd   → 如果 !isDragging → 这是点击，触发 播放/暂停
              如果 isDragging  → 这是滑动，交给 Video.vue 处理切换

player.on('play', () => {
    dramaStore.updateWatchRecord(props.vid, props.eid)  // 播放时记录观看历史
    isEnded.value = false
})

player.on('ended', () => {
    isEnded.value = true    // 播完显示"已结束"遮罩
})

while (videoInfoList.value.length < VIDEO_LIST_LENGTH) {
    const videoInfo = await randomList.value.pop()
    const add = await getVideoAdd(videoInfo.eid)   // ← 一个一个等
    videoInfo.url2 = add
    videoInfoList.value.push(videoInfo)
}

// 触摸结束
if (offsetY > 80)   → prev()  // 上滑 → 上一个视频
if (offsetY < -80)  → next()  // 下滑 → 下一个视频
else                → scrollToCurrent()  // 回弹

const videosIsReady = computed(() => {
    if (
        readyVideoNum.value >= videoInfoList.value.length &&
        videoInfoList.value.length != 0 &&
        !isRequiring.value
    ) {
        return true
    }
    return false
})

const handleVideoReady = (e) => {
    readyVideoNum.value += e
}

onBeforeMount(async () => {
    await requireNew(route.params.vid, route.params.eid)
})

while (videoInfoList.value.length < VIDEO_LIST_LENGTH) {
    const videoInfo = await randomList.value.pop()
    const add = await getVideoAdd(videoInfo.eid)   // await 了 5 次
    videoInfo.url2 = add
    videoInfoList.value.push(videoInfo)
}

// 应该的做法（伪代码）
const videoInfos = randomList.value.splice(0, VIDEO_LIST_LENGTH)
const urls = await Promise.all(videoInfos.map(v => getVideoAdd(v.eid)))
// 一次等 5 个，总耗时 ≈ max(单个请求) 而不是 sum

// PlayBar.vue
let isDragging = false
const currentMoveThreshold = 30

function handleTouchStart(e) {
    startX = touch.clientX
    startY = touch.clientY
    isDragging = false  // 重置标志
}

function handleTouchMove(e) {
    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
    if (distance > currentMoveThreshold) {
        isDragging = true  // 超过阈值认为是滑动
    }
}

function handleTouchEnd(e) {
    if (!isDragging) {
        // 点击才触发播放/暂停
        player.paused() ? player.play() : player.pause()
    }
}

// 统一使用 Pointer Events (推荐)
const useGesture = () => {
    const state = {
        startX: 0,
        startY: 0,
        startTime: 0,
        isDragging: false
    }
    
    const TAP_THRESHOLD = 30        // 像素
    const TAP_TIME_THRESHOLD = 300  // 毫秒
    
    const onPointerDown = (e) => {
        state.startX = e.clientX
        state.startY = e.clientY
        state.startTime = Date.now()
        state.isDragging = false
    }
    
    const onPointerMove = (e) => {
        const dx = e.clientX - state.startX
        const dy = e.clientY - state.startY
        if (Math.sqrt(dx * dx + dy * dy) > TAP_THRESHOLD) {
            state.isDragging = true
        }
    }
    
    const onPointerUp = (e) => {
        const duration = Date.now() - state.startTime
        if (!state.isDragging && duration < TAP_TIME_THRESHOLD) {
            // 确认是点击
            handleTap()
        }
    }
    
    return { onPointerDown, onPointerMove, onPointerUp }
}

const onPointerDown = (e) => {
    // 记录初始状态...
    state.startX = e.clientX
    state.startY = e.clientY
    state.startTime = Date.now()
    state.isDragging = false

    // 【新增优化】锁定当前指针，确保快速拖拽时不会丢失 pointerup 事件
    e.target.setPointerCapture(e.pointerId)
}

const onPointerUp = (e) => {
    // 处理点击逻辑...
    if (!state.isDragging && duration < TAP_TIME_THRESHOLD) {
        handleTap()
    }
    
    // 【新增优化】释放指针锁定
    e.target.releasePointerCapture(e.pointerId)
}

// PlayBar.vue - 只创建不销毁
onMounted(() => {
    player = window.videojs(props.videoInfo, options)
    player.on('play', () => { ... })
    player.on('ended', () => { ... })
})
// ❌ 缺少 onBeforeUnmount

import { onBeforeUnmount } from 'vue'

onBeforeUnmount(() => {
    if (player) {
        // 1. 移除所有事件监听
        player.off('play')
        player.off('pause')
        player.off('ended')
        
        // 2. 暂停播放
        player.pause()
        
        // 3. 销毁实例 (会清理DOM和事件)
        player.dispose()
        player = null
    }
})

// Chrome DevTools 检测步骤:
// 1. Performance → Record → 执行滑动操作 → Stop
// 2. Memory → Take Heap Snapshot
// 3. 对比多次操作后的内存占用
// 4. 搜索 detached 查看游离DOM

// 代码中临时检测
if (window.performance && performance.memory) {
    console.log('Used JS Heap:', performance.memory.usedJSHeapSize / 1048576, 'MB')
}

// Video.vue - 同时渲染5个视频，通过Playing控制
<PlayBar
    v-for="(video, index) in videoInfoList"
    :key="video.eid"
    :Playing="index == curIndex"
/>

// 浏览器自动播放策略 (Autoplay Policy)
// Chrome 66+ 要求：
// 1. 静音视频可以自动播放
// 2. 用户与域名有过交互后可以播放有声视频

// 最佳实践
const autoPlay = async (player) => {
    try {
        await player.play()
    } catch (err) {
        // 自动播放被阻止，显示播放按钮
        showPlayButton = true
    }
}

// 检测自动播放权限
const canAutoPlay = async () => {
    const video = document.createElement('video')
    video.muted = true
    try {
        await video.play()
        return true
    } catch {
        return false
    }
}

// handleVideo.js - 串行加载（慢）
while (videoInfoList.value.length < VIDEO_LIST_LENGTH) {
    const videoInfo = await randomList.value.pop()
    const add = await getVideoAdd(videoInfo.eid)  // 等待每个请求
    videoInfo.url2 = add
    videoInfoList.value.push(videoInfo)
}

// 优化后 - 并行加载（快5倍）
const loadVideosParallel = async () => {
    const videosToLoad = Array(VIDEO_LIST_LENGTH)
        .fill()
        .map(() => randomList.value.pop())
    
    const loadedVideos = await Promise.all(
        videosToLoad.map(async (videoInfo) => {
            const url = await getVideoAdd(videoInfo.eid)
            return { ...videoInfo, url2: url }
        })
    )
    
    videoInfoList.value = loadedVideos
}

// 预加载下一个视频
const preloadNextVideo = (currentIndex) => {
    const nextIndex = currentIndex + 1
    if (nextIndex < videoInfoList.value.length) {
        const nextVideo = videoInfoList.value[nextIndex]
        const link = document.createElement('link')
        link.rel = 'preload'
        link.href = nextVideo.url2
        link.as = 'video'
        document.head.appendChild(link)
    }
}

// Video.vue - scrollTo 触发重排 (Reflow)
videoElement.value.scrollTo({
    top: curIndex.value * videoHeight,  // 读取再写入
    behavior: 'smooth'
})

// CSS
.video-wrapper {
    transform: translateY(var(--offset-y, 0));
    transition: transform 0.3s ease;
    will-change: transform;
}

// JS
const scrollToCurrent = (index) => {
    const offset = -index * 100  // vh单位
    videoWrapper.value.style.setProperty('--offset-y', `${offset}vh`)
}

// 方法1：检测播放帧率
let lastTime = 0
let frameCount = 0

const checkStutter = () => {
    const now = performance.now()
    frameCount++
    
    if (now - lastTime >= 1000) {
        const fps = frameCount
        if (fps < 20) {
            console.warn('视频卡顿，FPS:', fps)
        }
        frameCount = 0
        lastTime = now
    }
    requestAnimationFrame(checkStutter)
}

// 方法2：检测 buffered 进度
const checkBuffering = (video) => {
    const buffered = video.buffered
    const currentTime = video.currentTime
    
    // 查找当前时间是否在已缓冲范围内
    let isBuffered = false
    for (let i = 0; i < buffered.length; i++) {
        if (currentTime >= buffered.start(i) && currentTime <= buffered.end(i)) {
            isBuffered = true
            break
        }
    }
    
    if (!isBuffered) {
        console.log('正在缓冲...')
    }
}

// 方法3：监听 waiting 事件
video.addEventListener('waiting', () => {
    console.log('视频因缓冲暂停')
})
video.addEventListener('playing', () => {
    console.log('视频恢复播放')
})