HTML5에서 비디오 재생 속도를 변경하는 방법 완벽 가이드

HTML5 재생 속도 제어 속성 소개

HTML5에서는 자바스크립트를 통해 오디오 및 비디오의 재생 속도를 손쉽게 조절할 수 있습니다. 핵심이 되는 속성은 다음 두 가지입니다.

playbackRate 속성은 오디오/비디오의 현재 재생 속도를 설정합니다. 반면 defaultPlaybackRate 속성은 미디어의 기본 재생 속도를 지정하며, 페이지가 로드되거나 미디어가 처음 재생될 때 적용됩니다.

비디오를 3배속으로 재생하기

다음 코드를 실행하면 비디오가 기본 속도의 3배 빠르게 재생됩니다.

/* 비디오를 3배속으로 재생 */
document.querySelector('video').defaultPlaybackRate = 3.0;
document.querySelector('video').play();

비디오를 2배속으로 재생하기

아래 코드는 비디오를 2배속으로 재생하는 예제입니다.

/* 비디오를 2배속으로 재생 */
document.querySelector('video').playbackRate = 2;

참고 사항

playbackRate 값은 일반적으로 0부터 16 사이의 숫자를 사용할 수 있습니다. 1보다 작은 값을 설정하면 느린 재생(예: 0.5는 절반 속도)이 가능하고, 1보다 큰 값은 빠른 재생을 의미합니다. 또한 이 속성은 HTMLMediaElement 인터페이스에 포함되어 있으므로 <audio> 요소에도 동일하게 적용할 수 있습니다.