HTML5에서 동영상을 재생하고 일시정지할 수 있는 기능을 자바스크립트로 구현하는 방법을 알아보겠습니다.

HTML 비디오 요소 생성하기

먼저, HTML에서 비디오를 재생하기 위해 <video> 태그를 사용해야 합니다. 다음은 비디오를 재생할 위치에 <video> 요소를 생성하는 예시입니다:

<video id="myVideo" width="640" height="360" controls>
   <source src="myvideo.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>

위의 예시에서 id 속성을 이용해 자바스크립트에서 요소를 찾아 사용할 수 있습니다. src 속성에 동영상 파일의 경로를 지정하고, type 속성에 동영상 파일의 형식을 설정합니다. 마지막으로, <video> 태그의 내용으로 “Your browser does not support the video tag.”라는 메시지를 포함하면, 해당 브라우저에서 비디오 태그를 지원하지 않을 때 출력됩니다.

자바스크립트로 비디오 재생 및 일시정지 기능 추가하기

자바스크립트를 사용하여 HTML5 비디오에 다양한 동작을 추가할 수 있습니다. 예를 들어, 비디오를 재생하고 일시정지하는 기능을 구현해보겠습니다.

var video = document.getElementById("myVideo");

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

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

위의 예시에서는 getElementById() 메서드를 사용해 HTML에서 <video> 요소를 가져옵니다. 그런 다음, playVideo() 함수와 pauseVideo() 함수를 정의하여 비디오 재생 및 일시정지를 수행할 수 있습니다. play() 함수는 비디오를 재생시키고, pause() 함수는 비디오를 일시정지합니다.

이벤트를 이용한 비디오 제어

비디오 재생 및 일시정지 외에도, 이벤트를 이용하여 비디오를 제어할 수 있습니다. 예를 들어, 비디오 마우스 클릭 이벤트를 사용하여 클릭할 때마다 비디오를 재생하거나 일시정지 시킬 수 있습니다.

video.addEventListener("click", toggleVideo);

function toggleVideo() {
   if (video.paused) {
      video.play();
   } else {
      video.pause();
   }
}

위의 예시에서는 addEventListener() 메서드를 사용하여 비디오 요소에 “click” 이벤트를 등록합니다. 비디오를 클릭할 때마다 toggleVideo() 함수가 호출되고, 비디오가 일시정지 상태인 경우 재생하고, 재생 중인 경우 일시정지합니다.

자바스크립트를 사용하여 HTML5 비디오에 다양한 동작을 추가할 수 있습니다. 비디오 제어 기능은 사용자에게 좀 더 편리한 동영상 시청 경험을 제공할 수 있으며, 자신의 웹 애플리케이션에 맞게 커스터마이징할 수 있습니다.

코드 예시, 참고 자료는 다음과 같습니다:

• HTML video Tag
• JavaScript HTML DOM Video Object

#javascript #HTML5