HTML5의 등장으로 비디오 콘텐츠를 웹에서 쉽게 재생할 수 있게 되었습니다. 이러한 비디오 재생을 조작하고 컨트롤하기 위해서는 자바스크립트를 활용할 수 있습니다.

HTML5 비디오 요소

HTML5에서 비디오를 재생하기 위해서는 비디오 요소를 사용해야 합니다. 다음은 비디오 요소의 예시 코드입니다.

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

위의 코드에서 myVideo라는 id를 가진 비디오 요소를 생성하였습니다. source 태그를 통해 비디오 파일의 경로와 형식을 설정할 수 있습니다. 비디오 파일이 지원되지 않는 경우에는 Your browser does not support the video tag. 메세지가 보여집니다.

자바스크립트를 통한 비디오 조작

자바스크립트를 사용하면 비디오 요소를 조작하고 컨트롤할 수 있습니다. 다음은 비디오 재생과 중지를 제어하는 간단한 예시 코드입니다.

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

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

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

위의 코드에서 playVideo() 함수는 비디오를 재생하고 pauseVideo() 함수는 재생을 중지합니다. 이러한 함수를 버튼의 클릭 이벤트와 연결하여 원하는 시점에 비디오를 조작할 수 있습니다.

추가적인 비디오 컨트롤

자바스크립트를 사용하면 비디오의 다양한 컨트롤을 할 수 있습니다. 비디오의 재생 시간을 가져오거나 설정하는 방법, 볼륨 조절 등의 기능을 추가할 수 있습니다. 자세한 내용은 HTML5 Video MDN 문서를 참조하시기 바랍니다.

위의 예시 코드에서 간단한 비디오 재생과 중지만을 다루었지만, 자바스크립트를 통해 훨씬 다양한 기능을 구현할 수 있습니다.

#HTML5 #비디오 #자바스크립트