HTML5의 비디오 요소는 웹 개발에서 매우 유용한 요소입니다. 비디오를 재생하고 일시정지하거나 특정 시간으로 이동하는 등의 작업을 자바스크립트를 사용하여 제어할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트 터치 이벤트를 사용하여 HTML5 비디오와 상호 작용하는 방법에 대해 알아보겠습니다.

터치 이벤트 등록하기

자바스크립트에서 터치 이벤트를 처리하기 위해 다음과 같이 이벤트 리스너를 등록할 수 있습니다.

const videoElement = document.getElementById('video');

videoElement.addEventListener('touchstart', function() {
    // 터치 시작 시 실행할 코드 작성
});

videoElement.addEventListener('touchmove', function() {
    // 터치 이동 시 실행할 코드 작성
});

videoElement.addEventListener('touchend', function() {
    // 터치 종료 시 실행할 코드 작성
});

위의 코드에서는 video라는 id를 가진 HTML5 비디오 요소에 대해 터치 이벤트 리스너를 등록하고 있습니다. touchstart, touchmove, touchend와 같은 터치 이벤트를 사용하여 필요한 동작을 처리할 수 있습니다.

비디오 제어하기

터치 이벤트를 사용하여 HTML5 비디오를 제어하는 예제를 살펴보겠습니다.

const videoElement = document.getElementById('video');
const playButton = document.getElementById('play');
const pauseButton = document.getElementById('pause');
const seekButton = document.getElementById('seek');

playButton.addEventListener('click', function() {
    videoElement.play();
});

pauseButton.addEventListener('click', function() {
    videoElement.pause();
});

seekButton.addEventListener('click', function() {
    videoElement.currentTime = 30; // 30초로 이동
});

위의 예제에서는 play, pause, seek라는 id를 가진 버튼 요소를 클릭할 때 비디오를 재생, 일시정지, 특정 시간으로 이동하는 작업을 수행합니다. 이 때 videoElement는 비디오 요소의 DOM 객체를 나타냅니다.

결과 확인하기

자바스크립트 터치 이벤트와 HTML5 비디오 상호 작용에 대한 결과는 브라우저에서 확인할 수 있습니다. 터치 이벤트를 수신하고 비디오를 제어하기 위해 HTML 파일에서 다음과 같이 요소를 추가할 수 있습니다.

<video id="video" controls>
    <source src="video.mp4" type="video/mp4">
</video>

<button id="play">재생</button>
<button id="pause">일시정지</button>
<button id="seek">30초 이동</button>

위의 코드에서는 video라는 id를 가진 비디오 요소와 play, pause, seek라는 id를 가진 버튼 요소를 추가하였습니다.

브라우저에서 HTML 파일을 열고 버튼을 클릭하거나 비디오를 터치하는 등의 상호 작용을 통해 결과를 확인할 수 있습니다.

#References

• MDN Web Docs - 비디오 요소
• MDN Web Docs - 터치 이벤트