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>

비디오 요소의 주요 구성 요소를 살펴보겠습니다.

  1. <video> 태그: 비디오 콘텐츠를 임베딩하기 위한 주요 컨테이너
  2. controls 속성: 기본 비디오 플레이어 컨트롤 (재생, 일시 중지, 볼륨) 을 추가합니다.
  3. width 및 height 속성: 비디오 플레이어의 치수를 설정합니다.
  4. 태그 내부의 텍스트: HTML5 비디오를 지원하지 않는 브라우저를 위한 대체 메시지

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

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

HTML video element with controls

비디오 소스 추가 및 음소거 재생 설정

이 단계에서는 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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

새로 추가된 부분을 자세히 살펴보겠습니다.

  1. <source> 태그: 브라우저 간 호환성을 위해 여러 비디오 형식을 지정할 수 있습니다.

    • 첫 번째 소스는 MP4 파일입니다.
    • 두 번째 소스는 WebM 파일입니다 (대체 형식).
    • 브라우저는 지원되는 첫 번째 형식을 사용합니다.

  2. muted 속성: 로드 시 비디오를 자동으로 음소거합니다.

    • 예상치 못한 오디오 재생을 방지하는 데 유용합니다.
    • 기본적으로 소리를 원하면 제거할 수 있습니다.

  3. type 속성: 비디오 소스의 MIME 유형을 지정합니다.

    • 브라우저가 비디오를 재생할 수 있는지 여부를 결정하는 데 도움이 됩니다.

샘플 비디오 URL 은 여러 소스 형식을 시연하는 공개 도메인 샘플 비디오입니다. 실제 시나리오에서는 이를 자체 비디오 파일 경로로 대체합니다.

HTML video element with multiple sources

맞춤 썸네일을 위한 비디오 포스터 구현

이 단계에서는 재생이 시작되기 전에 poster 속성을 사용하여 비디오 요소에 사용자 지정 썸네일 이미지를 추가하는 방법을 배우게 됩니다. 먼저, 포스터로 사용할 샘플 이미지를 다운로드해 보겠습니다.

다음 명령을 사용하여 샘플 이미지를 다운로드합니다.

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

이제 ~/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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

poster 속성에 대한 주요 사항:

  1. 비디오 재생이 시작되기 전에 사용자 지정 이미지를 표시합니다.
  2. 미리 보기로 첫 번째 비디오 프레임을 대체합니다.
  3. 더 매력적인 사용자 인터페이스를 만드는 데 도움이 됩니다.
  4. 로컬 또는 원격 이미지 파일과 함께 작동합니다.

포스터 이미지는 비디오 콘텐츠의 미리 보기를 제공하며 재생이 시작되기 전에 컨텍스트를 제공하여 사용자 경험을 향상시킬 수 있습니다.

Video poster thumbnail example

비디오 태그 속성 및 설정 탐색

이 단계에서는 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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

새로운 속성을 살펴보겠습니다.

  1. preload="metadata":

    • 재생 전에 비디오를 로드하는 방식을 제어합니다.
    • 옵션: auto (전체 비디오 로드), metadata (메타데이터만 로드), none (미리 로드하지 않음)

  2. loop:

    • 비디오가 종료될 때 자동으로 다시 재생되도록 합니다.
    • 배경 또는 반복 콘텐츠에 유용합니다.

  3. playsinline:

    • 모바일 장치에서 비디오를 인라인으로 재생할 수 있도록 합니다.
    • iOS 장치에서 자동 전체 화면 모드를 방지합니다.

실험해 볼 수 있는 추가 유용한 속성:

  • autoplay: 비디오 재생을 자동으로 시작합니다.
  • crossorigin: 교차 출처 비디오 소스를 처리합니다.
  • disablepictureinpicture: picture-in-picture 모드를 방지합니다.

전문가 팁:

  • 모든 브라우저가 모든 속성을 지원하는 것은 아닙니다.
  • 항상 다양한 장치와 브라우저에서 테스트하십시오.
  • 자동 재생 또는 루프를 사용할 때는 사용자 경험을 고려하십시오.

향상된 비디오 재생 경험 구현

이 단계에서는 사용자 지정 컨트롤과 스타일을 추가하여 비디오 재생 경험을 향상시키는 방법을 배우게 됩니다. 다음 내용으로 새로운 파일 ~/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="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.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 를 처음 접하더라도 걱정하지 마세요. 이 예제는 사용자 지정 비디오 컨트롤을 만들고 비디오 플레이어 인터페이스의 스타일을 지정하는 간단한 방법을 제공합니다.

이 예제의 주요 개선 사항:

  1. 사용자 지정 비디오 컨트롤:

    • 재생/일시 중지 및 음소거 버튼이 있는 사용자 지정 제어판을 만듭니다.
    • 정확한 볼륨 제어를 위한 볼륨 슬라이더를 추가합니다.

  2. CSS 스타일 지정:

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

  3. JavaScript 상호 작용:

    • togglePlay(): 비디오 재생/일시 중지를 수동으로 제어합니다.
    • muteToggle(): 비디오 음소거 상태를 토글합니다.
    • changeVolume(): 프로그래밍 방식으로 비디오 볼륨을 조정합니다.

이 접근 방식은 기본 브라우저 컨트롤에 비해 비디오 플레이어 인터페이스를 설계하는 데 더 많은 유연성을 제공합니다.

Custom video player interface example

요약

이 랩에서는 참가자들이 <video> 태그를 사용하여 HTML 에서 비디오 요소를 임베드하고 사용자 정의하는 방법을 배웠습니다. 이 랩에서는 기본 컨트롤 추가, 여러 비디오 소스 지정, 재생 설정 구성 등 대화형 비디오 플레이어를 만들기 위한 필수 기술을 다루었습니다. 개발된 주요 기술에는 비디오 치수 설정, 대체 콘텐츠 구현, 기본 플레이어 컨트롤 추가, 비디오 음소거 및 소스 선택 관리가 포함됩니다.

참가자들은 재생/일시 중지 컨트롤, 너비 및 높이 구성, 다양한 비디오 형식 지원과 같은 표준 기능을 갖춘 데모 비디오 요소를 생성하여 실용적인 HTML5 비디오 임베딩 기술을 탐구했습니다. 이 랩은 비디오 태그 속성을 이해하고 다양한 구성 옵션을 통해 임베드된 비디오 콘텐츠와의 사용자 상호 작용을 향상시키는 실습 경험을 제공했습니다.

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

초보자를 위한 HTML

htmlweb-development
틱택토 웹 앱 만들기

틱택토 웹 앱 만들기

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

두더지 잡기 웹 게임 만들기

javascriptweb-development