HTML5에서는 <video> 요소를 사용하여 비디오를 쉽게 재생할 수 있습니다. 이 비디오 요소를 자바스크립트를 이용하여 동적으로 재생 리스트를 만들 수 있습니다. 이번 블로그 포스트에서는 HTML5 비디오를 자바스크립트로 동적으로 재생 리스트를 만드는 방법을 알아보겠습니다.

필요한 HTML 구조 설정하기

먼저, 재생 리스트를 표시할 HTML 요소를 마크업합니다. 보통 <ul> 요소를 사용하여 리스트를 만들지만, 여기서는 <div> 요소를 사용하도록 하겠습니다.

<div id="video_playlist"></div>

자바스크립트 코드 작성하기

다음으로, 자바스크립트 코드를 작성하여 동적으로 재생 리스트를 만들어 보겠습니다. 자바스크립트 코드에서는 비디오 URL과 제목을 배열로 정의하고, 반복문을 통해 각 비디오에 대한 HTML을 생성합니다.

var videoList = [
  {url: "video1.mp4", title: "비디오 1"},
  {url: "video2.mp4", title: "비디오 2"},
  {url: "video3.mp4", title: "비디오 3"}
];

var playlistHTML = '';

for (var i = 0; i < videoList.length; i++) {
  playlistHTML += '<div class="video_item">';
  playlistHTML += '<video src="' + videoList[i].url + '" controls></video>';
  playlistHTML += '<h3>' + videoList[i].title + '</h3>';
  playlistHTML += '</div>';
}

document.getElementById("video_playlist").innerHTML = playlistHTML;

위의 코드에서는 videoList라는 배열을 정의하고 각 비디오의 URL과 제목을 포함하고 있습니다. 이후 반복문을 통해 비디오에 대한 HTML을 생성하고, 최종적으로 “video_playlist”라는 id를 가진 요소의 내부에 생성한 HTML을 삽입합니다.

스타일링하기

생성한 동적 재생 리스트를 스타일링하여 보기 좋게 만들어보겠습니다. CSS를 이용해 간단한 스타일링을 추가해봅시다.

.video_item {
  margin-bottom: 20px;
}

.video_item video {
  width: 100%;
}

위의 CSS 코드는 동적으로 생성한 비디오 아이템들에 대해 일부 스타일을 적용합니다. 각 비디오 아이템들 사이에 20px의 여백을 주고, 비디오 요소는 100%의 너비로 표시되도록 합니다.

완성된 동적 재생 리스트

위의 코드를 실행하면, 비디오와 제목이 포함된 동적 재생 리스트가 생성됩니다. 이제 동적으로 비디오를 추가하거나 삭제할 수 있으며, 각 비디오에 대한 컨트롤 기능을 제공합니다.

마지막으로, 완성된 동적 재생 리스트의 예시 코드를 확인해보세요.

#tech #html5