Web 視頻播放速度控制：基於 jQuery UI Slider 實現拖動條交互組件

HTML 結構

<video id="player" src="movie.mp4" controls></video>
<div id="speed-slider"></div>

JS 初始化

$(function() {
    $("#speed-slider").slider({
        min: 0.5, max: 2, step: 0.1, value: 1,
        slide: function(e, ui) {
            $("#player")[0].playbackRate = ui.value;
            $("#speed-label").text("速度: " + ui.value.toFixed(1) + "x");
        }
    });
});

樣式調整

#speed-slider { width: 300px; margin: 10px 0; }
.ui-slider-handle { width: 1.2em; height: 1.2em; }

進階

• 綁定鍵盤快捷鍵（←/→ 調整速度）。
• 記住用戶偏好 localStorage.setItem('playbackRate', val)。
• 支援觸摸設備（jQuery UI Touch Punch）。