LabEx
무료 가입

HTML에서 동영상 삽입 및 사용자 지정

HTMLBeginner
지금 연습하기

소개

이 실습에서는 강력한 <video> 태그를 사용해 HTML에 동영상 요소를 삽입하고 사용자 지정하는 방법을 배웁니다. 컨트롤 추가, 동영상 소스 구성, 사용자 지정 썸네일 적용, 다양한 동영상 태그 속성 활용 등 대화형 동영상 플레이어를 만드는 데 필요한 핵심 기법을 다룹니다.

단계별 실습을 통해 기본 동영상 요소 생성부터 고급 구성까지 HTML5 동영상 삽입 기술을 익힙니다. 여러 동영상 소스를 추가하고 재생 설정을 제어하며 사용자 지정 썸네일을 설정하고 웹 페이지에서 더욱 몰입감 있고 사용하기 쉬운 동영상 환경을 만드는 방법을 확인합니다.

컨트롤이 있는 기본 동영상 요소 만들기

이 단계에서는 HTML에서 기본 동영상 요소와 필수 컨트롤을 만드는 방법을 배웁니다. HTML5는 웹 페이지에 동영상을 직접 삽입할 수 있는 간단하고 강력한 <video> 태그를 제공합니다.

먼저 동영상 삽입을 확인할 HTML 파일을 만듭니다. WebIDE를 열고 ~/project 디렉터리에 video-demo.html이라는 새 파일을 만듭니다.

touch ~/project/video-demo.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Video Element</title>
  </head>
  <body>
    <h1>My First Video Element</h1>

    <video controls width="640" height="360">
      Your browser does not support the video tag.
    </video>
  </body>
</html>

동영상 요소의 주요 구성 요소는 다음과 같습니다.

  • <video> 태그: 동영상 콘텐츠를 삽입하는 기본 컨테이너입니다.
  • controls 속성: 기본 동영상 플레이어 컨트롤(재생, 일시 중지, 볼륨)을 추가합니다.
  • width 및 height 속성: 동영상 플레이어의 크기를 설정합니다.
  • 태그 내부의 텍스트: HTML5 동영상을 지원하지 않는 브라우저에 표시할 대체 메시지입니다.

controls 속성은 재생, 일시 중지, 볼륨 조절, 전체 화면 모드와 같은 표준 재생 컨트롤을 사용자에게 제공하므로 중요합니다.

참고: WebIDE에서 HTML 파일을 미리 보는 방법에서 자세히 알아보세요.

컨트롤이 있는 HTML 동영상 요소

동영상 소스 추가 및 음소거 재생 설정

이 단계에서는 HTML 동영상 요소에 동영상 소스를 추가하고 초기 재생 상태를 제어하는 방법을 배웁니다. 앞에서 만든 video-demo.html 파일을 수정해 동영상 소스를 포함하고 기본적으로 동영상을 음소거하는 방법을 확인합니다.

WebIDE에서 ~/project/video-demo.html 파일을 열고 다음 내용으로 업데이트합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Video Source and Mute</title>
  </head>
  <body>
    <h1>Video with Multiple Sources</h1>

    <video controls width="640" height="360" muted>
      <source
        src="sample-video.mp4"
        type="video/mp4"
      />
      <source
        src="sample-video.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

새로 추가된 항목은 다음과 같습니다.

  • <source> 태그: 브라우저 호환성을 위해 여러 동영상 형식을 지정할 수 있습니다.

    • 첫 번째 소스는 MP4 파일입니다.
    • 두 번째 소스는 WebM 파일(대체 형식)입니다.
    • 브라우저는 재생할 수 있는 첫 번째 형식을 사용합니다.

  • muted 속성: 동영상이 로드될 때 자동으로 음소거합니다.

    • 예상하지 못한 오디오 재생을 방지할 때 유용합니다.
    • 기본적으로 소리를 재생하려면 이 속성을 제거하면 됩니다.

  • type 속성: 동영상 소스의 MIME 유형을 지정합니다.

    • 브라우저가 해당 동영상을 재생할 수 있는지 판단하는 데 도움을 줍니다.

설정 스크립트는 두 샘플 동영상 파일을 로컬에 생성하므로 외부 동영상 호스트에 의존하지 않고 예제를 실행할 수 있습니다. 실제 환경에서는 이 경로를 직접 만든 동영상 파일의 경로로 바꿉니다.

여러 소스가 있는 HTML 동영상 요소

사용자 지정 썸네일을 위한 동영상 포스터 적용

이 단계에서는 poster 속성을 사용해 동영상 재생이 시작되기 전에 동영상 요소에 사용자 지정 썸네일 이미지를 추가하는 방법을 배웁니다. 먼저 포스터로 사용할 샘플 이미지를 다운로드합니다.

다음 명령으로 샘플 이미지를 다운로드합니다.

wget https://placehold.co/640x360.png?text=Video+Thumbnail -O ~/project/video-thumbnail.png

이제 poster 속성을 포함하도록 ~/project/video-demo.html 파일을 수정합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Video with Custom Poster</title>
  </head>
  <body>
    <h1>Video with Custom Thumbnail</h1>

    <video controls width="640" height="360" muted poster="video-thumbnail.png">
      <source
        src="sample-video.mp4"
        type="video/mp4"
      />
      <source
        src="sample-video.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

poster 속성의 주요 특징은 다음과 같습니다.

  • 동영상 재생이 시작되기 전에 사용자 지정 이미지를 표시합니다.
  • 미리 보기로 표시되는 첫 번째 동영상 프레임을 대체합니다.
  • 더욱 매력적인 사용자 인터페이스를 만드는 데 도움이 됩니다.
  • 로컬 이미지 파일과 원격 이미지 파일 모두 사용할 수 있습니다.

포스터 이미지는 동영상 콘텐츠의 미리 보기를 제공하므로 재생이 시작되기 전에 동영상 내용을 파악할 수 있어 사용자 경험을 개선합니다.

동영상 포스터 썸네일 예시

동영상 태그 속성과 구성 살펴보기

이 단계에서는 HTML5 동영상 요소에서 사용할 수 있는 다양한 속성과 구성을 자세히 살펴봅니다. 고급 설정을 확인할 수 있도록 ~/project/video-demo.html 파일을 다음과 같이 수정합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced Video Configurations</title>
  </head>
  <body>
    <h1>Exploring Video Tag Attributes</h1>

    <video
      controls
      width="640"
      height="360"
      muted
      poster="video-thumbnail.png"
      preload="metadata"
      loop
      playsinline
    >
      <source
        src="sample-video.mp4"
        type="video/mp4"
      />
      <source
        src="sample-video.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

새로 추가된 속성은 다음과 같습니다.

  • preload="metadata":

    • 재생 전에 동영상을 어떻게 로드할지 제어합니다.
    • 옵션: auto(동영상 전체 로드), metadata(메타데이터만 로드), none(미리 로드하지 않음)

  • loop:

    • 동영상이 끝나면 자동으로 다시 재생합니다.
    • 배경 동영상이나 반복 콘텐츠에 유용합니다.

  • playsinline:

    • 모바일 기기에서 동영상을 인라인으로 재생할 수 있게 합니다.
    • iOS 기기에서 자동으로 전체 화면 모드로 전환되는 것을 방지합니다.

다음과 같은 유용한 속성도 직접 실험해 볼 수 있습니다.

  • autoplay: 동영상 재생을 자동으로 시작합니다.
  • crossorigin: 원본 간 동영상 소스를 처리합니다.
  • disablepictureinpicture: PIP(Picture-in-Picture) 모드를 방지합니다.

유용한 팁:

  • 모든 브라우저가 모든 속성을 지원하는 것은 아닙니다.
  • 여러 기기와 브라우저에서 항상 테스트합니다.
  • autoplay 또는 loop를 사용할 때는 사용자 경험을 고려합니다.

동영상 재생 환경 개선

이 단계에서는 사용자 지정 컨트롤과 스타일을 추가해 동영상 재생 환경을 개선하는 방법을 배웁니다. ~/project/video-enhanced.html이라는 새 파일을 만들고 다음 내용을 입력합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Enhanced Video Player</title>
    <style>
      .video-container {
        max-width: 640px;
        margin: 0 auto;
        position: relative;
      }
      .custom-controls {
        display: flex;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px;
      }
      .custom-controls button {
        background: none;
        border: none;
        color: white;
        margin-right: 10px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="video-container">
      <video id="myVideo" width="640" height="360" poster="video-thumbnail.png">
        <source
          src="sample-video.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>

      <div class="custom-controls">
        <button onclick="togglePlay()">Play/Pause</button>
        <button onclick="muteToggle()">Mute/Unmute</button>
        <input
          type="range"
          min="0"
          max="100"
          value="50"
          onchange="changeVolume(this.value)"
        />
      </div>
    </div>

    <script>
      const video = document.getElementById("myVideo");

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

      function muteToggle() {
        video.muted = !video.muted;
      }

      function changeVolume(value) {
        video.volume = value / 100;
      }
    </script>
  </body>
</html>

CSS와 JavaScript가 처음이어도 걱정하지 마세요. 이 예제는 사용자 지정 동영상 컨트롤을 만들고 동영상 플레이어 인터페이스의 스타일을 지정하는 간단한 방법을 보여 줍니다.

이 예제에서 개선한 핵심 내용은 다음과 같습니다.

  • 사용자 지정 동영상 컨트롤:

    • 재생/일시 중지 버튼과 음소거 버튼이 있는 사용자 지정 컨트롤 패널을 만듭니다.
    • 정밀하게 볼륨을 조절할 수 있는 볼륨 슬라이더를 추가합니다.

  • CSS 스타일 지정:

    • 동영상 컨테이너와 컨트롤의 스타일을 지정합니다.
    • 레이아웃에 flexbox를 사용합니다.
    • 컨트롤에 반투명 배경을 추가합니다.

  • JavaScript 상호 작용:

    • togglePlay(): 동영상 재생과 일시 중지를 직접 제어합니다.
    • muteToggle(): 동영상의 음소거 상태를 전환합니다.
    • changeVolume(): 프로그래밍 방식으로 동영상 볼륨을 조절합니다.

이 방법을 사용하면 브라우저 기본 컨트롤을 사용하는 것보다 동영상 플레이어 인터페이스를 더욱 유연하게 설계할 수 있습니다.

사용자 지정 동영상 플레이어 인터페이스 예시

요약

이 실습에서는 <video> 태그를 사용해 HTML에 동영상 요소를 삽입하고 사용자 지정하는 방법을 배웠습니다. 기본 컨트롤 추가, 여러 동영상 소스 지정, 재생 설정 구성 등 대화형 동영상 플레이어를 만드는 데 필요한 핵심 기법을 다뤘습니다. 동영상 크기 설정, 대체 콘텐츠 구현, 기본 플레이어 컨트롤 추가, 동영상 음소거 및 소스 선택 관리 방법도 익혔습니다.

표준 재생/일시 중지 컨트롤, 너비와 높이 설정, 다양한 동영상 형식 지원 등의 기능을 갖춘 데모 동영상 요소를 만들며 실용적인 HTML5 동영상 삽입 기술을 익혔습니다. 또한 동영상 태그 속성을 이해하고 여러 구성 옵션을 사용해 삽입된 동영상 콘텐츠와의 사용자 상호 작용을 개선하는 실습을 진행했습니다.

관련 HTML 코스
초보자를 위한 HTML

초보자를 위한 HTML

web-development
틱택토 웹 앱 만들기

틱택토 웹 앱 만들기

web-development
두더지 잡기 웹 게임 만들기

두더지 잡기 웹 게임 만들기

web-development