비디오 플레이어에 타임라인을 표시하는 것은 사용자들에게 비디오의 진행 상황을 시각적으로 보여주는 효과적인 방법입니다. 이를 위해 자바스크립트를 사용하여 HTML5 비디오 태그와 상호작용할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트로 HTML5 비디오 타임라인을 표시하는 방법을 알아보겠습니다.
HTML5 비디오 태그
다음과 같이 HTML5 비디오 태그를 사용하여 비디오를 웹 페이지에 삽입합니다.
<video id="myVideo" width="640" height="360" controls>
<source src="myvideo.mp4" type="video/mp4">
</video>
위의 코드에서 id 속성은 자바스크립트에서 해당 비디오 요소를 식별하는 데 사용됩니다. controls 속성은 비디오 플레이어에 컨트롤러를 표시하는 역할을 합니다. source 요소는 비디오 파일의 경로와 타입을 지정합니다.
자바스크립트로 타임라인 표시하기
비디오 타임라인을 표시하기 위해 자바스크립트를 사용해보겠습니다. 먼저, HTML 문서에 스크립트를 추가합니다.
<script>
var video = document.getElementById("myVideo");
var timeline = document.getElementById("timeline");
video.addEventListener("timeupdate", function() {
var currentTime = video.currentTime;
var totalDuration = video.duration;
var percentage = (currentTime / totalDuration) * 100;
timeline.style.width = percentage + "%";
});
</script>
위의 스크립트에서는 timeupdate 이벤트를 사용하여 비디오의 현재 시간을 가져와서 타임라인을 업데이트합니다. currentTime 변수는 비디오의 현재 재생 시간을 저장하고, totalDuration 변수는 비디오의 전체 재생 시간을 저장합니다. percentage 변수는 현재 시간과 전체 재생 시간의 비율을 계산하여 타임라인의 너비를 조정합니다. 마지막으로, timeline 요소의 너비를 타임라인의 변화에 따라 업데이트합니다.
결과 확인하기
위의 코드를 HTML 문서에 추가한 후, 페이지를 브라우저에서 열어서 비디오를 재생해보세요. 비디오가 재생되는 동안 타임라인이 업데이트되는 것을 확인할 수 있습니다.
마무리
이번 블로그 포스트에서는 자바스크립트를 사용하여 HTML5 비디오 타임라인을 표시하는 방법을 알아보았습니다. 이를 통해 사용자들은 비디오의 진행 상황을 시각적으로 파악할 수 있으며, 더 나은 사용자 경험을 제공할 수 있습니다.