[javascript] 터치 이벤트를 사용하여 터치한 위치에 따라 동영상 재생/일시정지를 제어하는 방법은?

12 Dec 2023

javascript

const video = document.getElementById('myVideo');
const videoContainer = document.getElementById('videoContainer');

videoContainer.addEventListener('click', function(event) {
    const rect = videoContainer.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    if (x < rect.width / 2) {
        if (video.paused) {
            video.play();
        } else {
            video.pause();
        }
    }
});

위의 코드는 id가 “myVideo”인 동영상 요소와 id가 “videoContainer”인 요소를 사용하여, 사용자가 터치한 위치에 따라 동영상을 일시정지 또는 재생시키는 방법을 보여줍니다. 코드를 실행하려면 해당 요소들을 HTML에 추가해야 합니다.

이러한 방식으로 사용자의 터치 위치에 따라 동영상을 제어할 수 있으며, 이를 기반으로 다양한 상호작용을 추가로 구현할 수 있습니다.