HTML5 비디오 태그로 특정 시점부터 재생하기
HTML5의 <video> 태그를 사용할 때 currentTime 속성을 설정해도 비디오가 원하는 시점부터 재생되지 않는 경우가 있습니다. Google Chrome 브라우저에서 이런 문제가 자주 발생하는데, 원인은 대부분 웹 서버에 있습니다.
원인: 웹 서버의 바이트 범위(Byte Range) 미지원
Chrome에서 비디오 탐색(seeking) 기능이 정상적으로 작동하려면 웹 서버가 HTTP 범위 요청(Range Request), 즉 바이트 단위로 파일을 나누어 전송하는 기능을 반드시 지원해야 합니다.
서버가 바이트 범위를 지원하지 않으면 Chrome은 비디오 탐색 기능을 비활성화합니다. 그 결과 currentTime 속성에 아무리 값을 설정해도 전혀 반영되지 않습니다.
웹 서버 테스트 방법
아래 curl 명령어로 서버가 범위 요청을 지원하는지 확인할 수 있습니다. 첫 번째 바이트(0~0)만 요청하는 간단한 테스트입니다.
curl --dump-header - -r0-0 https://theurl
정상 응답 확인 포인트
명령어 실행 후 응답 헤더에서 다음 두 가지를 확인하세요.
- HTTP/1.1 206 Partial Content: 서버가 부분 콘텐츠 응답을 반환하면 범위 요청을 지원하는 것입니다.
- Accept-Ranges: bytes: 서버가 바이트 단위 범위 요청을 허용한다는 의미입니다.
반대로 HTTP/1.1 200 OK만 반환되고 Accept-Ranges 헤더가 없다면, 서버가 파일을 통째로 전송하고 있으므로 Chrome에서 탐색과 currentTime 설정이 동작하지 않습니다.
해결 방법
대부분의 최신 웹 서버는 기본적으로 범위 요청을 지원합니다. 문제가 지속된다면 다음 사항을 점검하세요.
- Nginx: 정적 파일 서비스 시 기본적으로 범위 요청을 지원합니다. 프록시 설정이 있다면
proxy_buffering off;또는 관련 설정을 확인하세요. - Apache: 일부 모듈이나 PHP 스크립트를 통해 파일을 스트리밍하는 경우 범위 요청이 차단될 수 있습니다. 직접 정적 파일을 제공하거나 스트리밍 코드를 수정해야 합니다.
- CDN 또는 로드밸런서 사용 시: 중간 계층이 Range 헤더를 제거하지 않는지 확인하세요.
서버가 바이트 범위를 올바르게 지원하기 시작하면, JavaScript에서 video.currentTime = 원하는_초_단위_값;으로 설정했을 때 Chrome에서도 정상적으로 해당 시점부터 재생됩니다.