Colin's Blog
비디오 플레이어 UI를 위한 HTML, CSS 및 자바스크립트

비디오 플레이어는 웹 페이지에서 동영상을 재생할 수 있는 핵심 요소입니다. 사용자들이 비디오를 간편하게 컨트롤하고 시청할 수 있도록 직관적이고 유용한 사용자 인터페이스를 제공하는 것이 중요합니다. 이를 위해 HTML, CSS 및 자바스크립트를 사용하여 효과적인 비디오 플레이어 UI를 만들 수 있습니다.

1. HTML 구조

비디오 플레이어를 구성하기 위해 먼저 HTML 요소들을 생성해야 합니다. 아래는 비디오 플레이어를 구성하는 간단한 HTML 구조의 예입니다.

<div class="video-player">
  <video id="my-video">
    <source src="video.mp4" type="video/mp4">
  </video>
  <div class="controls">
    <button id="play-button">재생</button>
    <button id="pause-button">일시정지</button>
    <div id="progress-bar">
      <div id="progress"></div>
    </div>
  </div>
</div>

위 코드에서는 비디오 요소를 <video> 태그로 생성하고, 동영상 파일 경로를 <source> 태그로 지정합니다. 컨트롤 버튼을 위한 <button> 요소와 프로그레스 바를 위한 <div> 요소도 같이 생성합니다.

2. CSS 스타일링

비디오 플레이어를 시각적으로 가독성 있게 만들기 위해 CSS 스타일링을 적용해야 합니다. 아래는 비디오 플레이어 UI를 꾸미기 위한 간단한 CSS 스타일링 예제입니다.

.video-player {
  position: relative;
  width: 400px;
  height: 300px;
}

.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

button {
  margin-right: 10px;
  background-color: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
}

#progress-bar {
  width: 100%;
  height: 5px;
  background-color: #ccc;
  margin-top: 10px;
}

#progress {
  height: 100%;
  background-color: #ff0000;
  width: 0;
}

위 코드에서는 비디오 플레이어를 감싸는 .video-player 클래스의 크기를 설정하고, 컨트롤 엘리먼트인 .controls 클래스를 화면 하단에 위치시킵니다. 버튼 스타일링은 투명한 배경에 흰색 글자로 표시하고, 프로그레스 바는 배경 색상과 빨간색 바를 나타내도록 설정합니다.

3. 자바스크립트 기능

비디오 플레이어에 사용자 인터랙션을 추가하기 위해 자바스크립트를 사용합니다. 아래는 간단한 자바스크립트 코드 예제입니다.

const video = document.getElementById('my-video');
const playButton = document.getElementById('play-button');
const pauseButton = document.getElementById('pause-button');
const progressBar = document.getElementById('progress');
let isPlaying = false;

playButton.addEventListener('click', function() {
  if (isPlaying) {
    video.pause();
    playButton.innerText = '재생';
    isPlaying = false;
  } else {
    video.play();
    playButton.innerText = '정지';
    isPlaying = true;
  }
});

pauseButton.addEventListener('click', function() {
  video.pause();
  playButton.innerText = '재생';
  isPlaying = false;
});

video.addEventListener('timeupdate', function() {
  const progress = (video.currentTime / video.duration) * 100;
  progressBar.style.width = `${progress}%`;
});

위 코드에서는 비디오 요소, 재생 버튼, 정지 버튼, 프로그레스 바를 변수로 가져와서 각각의 기능을 구현합니다. 재생 버튼을 클릭할 때 비디오를 재생하거나 일시정지하고, 프로그레스 바는 비디오 재생 시간에 맞게 업데이트되도록 설정합니다.

결론

HTML, CSS 및 자바스크립트를 사용하여 비디오 플레이어 UI를 만드는 방법에 대해 알아보았습니다. 비디오 플레이어 UI를 구현하면 사용자가 동영상을 편리하게 관리하고 재생할 수 있습니다. 이를 통해 웹 페이지에 다양한 멀티미디어 콘텐츠를 더욱 효과적으로 제공할 수 있습니다.

참고 자료

#tech #webdevelopment

© 2018 Colin. All rights reserved.