HTML5의 등장으로 인해 웹에서 비디오 재생이 더욱 쉬워졌습니다. 이제 웹 페이지에 비디오 요소를 삽입하고 제어하는 것이 간단해졌습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 HTML5 비디오 레이어를 제어하는 방법을 알아보겠습니다.

1. 비디오 요소 추가하기

우선 웹 페이지에 비디오 요소를 추가해야 합니다. HTML5에서는 <video> 요소를 사용하여 비디오를 삽입할 수 있습니다. 다음은 비디오를 추가하는 간단한 예제입니다.

<video id="myVideo" width="500" height="300" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<source> 요소를 사용하여 비디오 파일의 소스를 지정할 수 있습니다. 비디오 파일은 여러 개의 형식으로 제공하여 브라우저 호환성을 확보할 수 있습니다.

2. 자바스크립트로 비디오 제어하기

비디오를 제어하기 위해서는 자바스크립트를 사용해야 합니다. 자바스크립트를 사용하여 비디오 재생, 일시 정지, 볼륨 조절 등 다양한 제어를 할 수 있습니다. 다음은 자바스크립트를 사용하여 비디오를 재생하는 예제입니다.

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

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

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

function stopVideo() {
  video.currentTime = 0;
  video.pause();
}

위의 코드에서는 getElementById() 메소드를 사용하여 <video> 요소를 선택하고, 해당 요소의 play(), pause(), currentTime 속성을 사용하여 비디오를 제어합니다. playVideo(), pauseVideo(), stopVideo() 함수를 호출하여 비디오를 재생, 일시 정지, 멈춤할 수 있습니다.

3. 이벤트 처리하기

비디오 요소에는 다양한 이벤트가 발생할 수 있습니다. 이벤트를 활용하여 비디오의 상태 변화를 감지하고 원하는 동작을 수행할 수 있습니다. 다음은 비디오 재생이 완료되었을 때 이벤트를 처리하는 예제입니다.

video.addEventListener('ended', function() {
  // 비디오 재생이 완료되었을 때 수행할 동작
});

위의 코드에서는 addEventListener() 메소드를 사용하여 ended 이벤트를 감지하고, 해당 이벤트가 발생했을 때 수행할 코드를 작성합니다. 이 외에도 다양한 이벤트를 활용하여 비디오를 제어할 수 있습니다.

마무리

이렇게 자바스크립트를 사용하여 HTML5 비디오 레이어를 제어하는 방법을 알아보았습니다. 비디오 재생, 일시 정지, 멈춤을 비롯한 다양한 제어를 이용하여 웹 페이지에서 멋진 비디오 기능을 구현해보세요.

#HTML5 #자바스크립트