如何实现网页视频的倍速播放？

Question

如何在网页中通过JavaScript动态调整HTML5视频的播放速率，并确保在不同浏览器中保持兼容性？使用`video.playbackRate`属性设置倍速后，部分浏览器（如Safari）可能出现音质失真或不支持非线性倍速（如0.5、2.0以外的值），该如何处理？此外，如何结合UI控件实时同步显示当前倍速，并在全屏模式下维持设置？

Answer 1

一、基础概念：HTML5视频播放速率控制原理

HTML5 <video> 元素原生支持通过 JavaScript 的 playbackRate 属性来调整播放速度。该属性接受一个浮点数值，表示相对于原始速度的倍数。例如，1.0 为正常速度，0.5 为半速，2.0 为两倍速。

const video = document.getElementById('myVideo');
video.playbackRate = 1.5; // 设置为1.5倍速

大多数现代浏览器（Chrome、Firefox、Edge）均良好支持任意值（如 0.75、1.25），但 Safari 在某些版本中对非标准倍速（非 0.5/1.0/1.5/2.0）存在限制或音质失真问题。

二、兼容性挑战与浏览器行为分析

不同浏览器对 playbackRate 的实现存在差异：

浏览器	支持范围	音质表现	备注
Chrome	0.25 ~ 4.0	良好	支持平滑变速
Firefox	0.25 ~ 3.0	良好	Web Audio API 可增强处理
Safari (macOS/iOS)	仅 0.5, 1.0, 1.5, 2.0	部分失真	iOS 更严格
Edge	0.25 ~ 4.0	良好	基于 Chromium
Samsung Browser	0.5 ~ 2.0	中等	部分机型降级处理

三、解决方案设计：渐进式兼容策略

为确保跨浏览器一致性，需采用“降级+校验”机制：

1. 定义合法倍速数组：[0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0]
2. 检测当前浏览器是否支持目标速率
3. 若不支持，则自动映射到最近可用值
4. 使用 canPlayType 和特性探测判断能力
5. 监听 ratechange 事件验证实际设置结果
6. 在 Safari 中强制限制选择项

四、代码实现：动态倍速控制与UI同步

function setupPlaybackRateControl(videoId, buttonSelector) {
    const video = document.getElementById(videoId);
    const buttons = document.querySelectorAll(buttonSelector);
    const rateDisplay = document.getElementById('currentRate');

    // 定义安全倍速列表
    const safeRates = [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
    let currentRate = 1.0;

    // 特性检测：Safari 判断
    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

    function applyRate(rate) {
        let targetRate = rate;
        if (isSafari) {
            // 映射到最近的安全值
            targetRate = safeRates.reduce((prev, curr) =>
                Math.abs(curr - rate) < Math.abs(prev - rate) ? curr : prev
            );
        }
        video.playbackRate = targetRate;
        currentRate = video.playbackRate; // 实际生效值
        rateDisplay.textContent = `${currentRate}x`;
        updateActiveButton();
    }

    function updateActiveButton() {
        buttons.forEach(btn => {
            btn.classList.toggle('active', parseFloat(btn.dataset.rate) === currentRate);
        });
    }

    buttons.forEach(btn => {
        btn.addEventListener('click', () => {
            const rate = parseFloat(btn.dataset.rate);
            applyRate(rate);
        });
    });

    video.addEventListener('ratechange', () => {
        currentRate = video.playbackRate;
        rateDisplay.textContent = `${currentRate}x`;
        updateActiveButton();
    });

    return { video, applyRate, getCurrentRate: () => currentRate };
}

五、全屏模式下的状态维持机制

全屏切换可能导致 DOM 重绘或组件重建，需通过以下方式保持状态：

• 使用 sessionStorage 持久化当前倍速
• 监听 fullscreenchange 事件恢复设置
• 结合 MutationObserver 防止控件丢失

document.addEventListener('fullscreenchange', () => {
    if (!document.fullscreenElement) return;
    
    // 恢复全屏后倍速
    const savedRate = sessionStorage.getItem('video_playback_rate');
    if (savedRate) {
        video.playbackRate = parseFloat(savedRate);
    }
});

// 每次变更时保存
video.addEventListener('ratechange', () => {
    sessionStorage.setItem('video_playback_rate', video.playbackRate);
});

六、高级优化：结合 Web Audio API 提升音质

对于 Safari 等音质失真的场景，可考虑将音频解耦并通过 Web Audio API 进行时间拉伸处理（如使用 AudioContext.createBufferSource() 配合 playbackRate 节点控制），但这涉及复杂媒体流操作，适用于专业级播放器架构。

流程图如下所示：

graph TD
            A[用户点击倍速按钮] --> B{是否为Safari?}
            B -- 是 --> C[映射到安全倍速]
            B -- 否 --> D[直接设置playbackRate]
            C --> E[应用video.playbackRate]
            D --> E
            E --> F[触发ratechange事件]
            F --> G[更新UI显示]
            G --> H[存储至sessionStorage]
            H --> I[全屏切换时恢复]