HTML5의 소개로 비디오 엘리먼트를 쉽게 웹 페이지에 삽입할 수 있게 되었습니다. 이제는 비디오를 웹 페이지에서 제어하는 방법을 알아보겠습니다. 이번 포스트에서는 마우스 이벤트와 자바스크립트를 사용하여 HTML5 비디오를 제어하는 방법을 알려드리겠습니다.

비디오 엘리먼트 생성하기

먼저, HTML5 비디오 엘리먼트를 생성해야 합니다. 다음의 예제 코드를 참고하여 비디오 엘리먼트를 생성합니다.

<video id="myVideo" width="400" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

위의 코드에서 myVideo라는 id를 가진 비디오 엘리먼트를 생성하고, video.mp4라는 비디오 파일을 소스로 지정하였습니다.

마우스 이벤트 핸들러 추가하기

이제 마우스 이벤트를 사용하여 비디오 엘리먼트를 제어하는 자바스크립트 코드를 작성해보겠습니다. 다음의 예제 코드를 참고하여 마우스 이벤트 핸들러를 추가합니다.

<script>
var video = document.getElementById("myVideo");

function playVideo() {
  video.play();
}

function pauseVideo() {
  video.pause();
}

video.addEventListener("mouseenter", playVideo);
video.addEventListener("mouseleave", pauseVideo);
</script>

위의 코드에서 playVideo 함수는 비디오를 재생하고, pauseVideo 함수는 비디오를 일시정지하는 역할을 합니다. 또한, 비디오 엘리먼트에 mouseenter 이벤트와 mouseleave 이벤트를 추가하여 마우스가 엘리먼트 위에 올라갔을 때는 비디오를 재생하고, 마우스가 엘리먼트에서 벗어났을 때는 비디오를 일시정지합니다.

결과 확인하기

이제 웹 브라우저에서 페이지를 열고 마우스를 비디오 엘리먼트 위에 올려보면 비디오가 자동으로 재생되고, 마우스를 벗어나면 비디오가 일시정지되는 것을 확인할 수 있습니다.

이번 포스트에서는 마우스 이벤트와 자바스크립트를 사용하여 HTML5 비디오를 제어하는 방법에 대하여 살펴보았습니다. 이러한 비디오 제어 기능은 웹 페이지에서 보다 동적인 사용자 경험을 제공하는 데에 유용하게 활용될 수 있습니다.

자세한 내용은 HTML5 비디오와 마우스 이벤트 문서를 참고하시기 바랍니다.

#HTML5 #자바스크립트