비디오 건너뛰기와 건너뛰기 제한하기
영상의 일부를 건너뛰는 방법과 건너뛰기를 제한하는 방법을 알아본다.
영상 건너뛰기
1
document.querySelector('video').currentTime = document.querySelector('video').duration;
<video> 요소의 현재 재생 위치를 <video>의 전체 길이값으로 수정한다.
비디오 플레이어의 재생 바를 끝으로 옮기는 것과 같다. 이로 인해 비디오가 바로 끝난 상태가 된다.
영상 건너뛰기 제한하기
1
2
3
4
5
6
7
8
var m = 30;
let video = document.getElementById("testVideo");
video.addEventListener("seeking", function () {
if (video.currentTime > (m + 5)) {
video.currentTime = m; // 강제로 처음으로 이동
}
});
document.getElementById(“testVideo”);
document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고 이를 나타내는 Element 객체를 반환한다. Id는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 수 있다.
<script>
function changeColor(newColor) {
var elem = document.getElementById("para");
elem.style.color = newColor;
}
</script>
<html>
<head>
<title>getElementById 예제</title>
</head>
<body>
<p id="para">어떤 글</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>
blue 버튼을 클릭하면 id가 para인 <p> 부분의 텍스트가 푸른색으로 변경되고, red 버튼을 클릭하면 빨간색으로 변경된다.
즉, 위 코드는 HTML 문서에서 id가 testVideo인 요소를 찾아 해당 <video> 요소의 객체를 video 변수에 저장한다. 이후 video 변수를 통해 id가 testVideo인 <video>를 조작할 수 있다.
video.addEventListener(“seeking”, function () { … })
DOM이 모두 로드된 후, 사용자가 비디오를 건너뛰려고 seeking 할 때 function()이 실행되도록 한다.
seeking
사용자가 미디어 재생 시 타임 라인에서 재생 위치를 이동할 때 실행되는 이벤트다.
if (video.currentTime > (m + 5)) { video.currentTime = m; }
사용자의 현재 재생 시간이 m + 5보다 크면 강제로 현재 재생 위치를 m으로 이동시킨다.
m + 5
만약 사용자의 마지막 영상 위치 (이하 mark)를 일정 시간마다 currentTime으로 변경하도록 구현했다고 가정하자.
해당 시간마다 currentTime으로 mark를 덮어쓰지만 오차가 있을 수 있기 때문에 + 5를 해서 사용자가 mark 기준 5초 이상 건너뛰지 못하도록 제한한다.