html & css/개념

비디오와 오디오

Doo Hee 2023. 7. 2. 21:36 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- src -source, 비디오 경로 -->
    <!-- controls - 비디오 관련 재생, 멈춤, 음성 등 각종 조작법을 위한 UI 제공 -->
    <!-- autoplay - 자동실행 -->
    <!-- muted - 음성소거 -->
    <!-- loop - 영상이 끝에 가면 처음부터 실행 -->
    <!-- poster  - 영상 실행전 보이는 썸네일 이미지 -->
    <!-- preload - auto, metadata, none -->
    <!-- auto - 사용자가 영상을 시청하지 않아도 필요하다고 생각되면 전체 비디오(데이터)가 다운로드 될 수 있다.
                사용자가 영상을 시청하든 안하든 영상을 미리 다운로드, 중요한 영상이나 바로 보여줘야 할 영상에서 사용 -->
    <!-- metadata - 영상을 다운로드 하지 않고, 영상 상영 시간과 같은 메타 정보만 미리 가져옴 -->
    <!-- none - 영상을 다운로드 하지 않고, 사용자가 영상을 바로 보지 않을 확률이 매우 높은 것, 서버가 최소한의 트래픽을 유지하고 싶을 때 적용 -->
    <video
      src=""
      width="320px"
      controls
      autoplay
      poster="./img/cat.jpg"
    ></video>
    <video src="">
      <!-- <track> - 자막 넣는 태그 -->
      <!-- src - 자막 경로 -->
      <!-- srclang - 자막 경로의 언어 종류 -->
      <!-- label - 자막 라벨 -->
      <track src="" srclang="en" kind="subtitles" label="영어(English)" />
      <track src="" kind="subtitles" srclang="ko" label="한국어(Korean)" />
    </video>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- autoplay : 오디오 콘텐츠를 재생할 수 있는 가장 빠른 시점에 자동 재생 -->
    <!-- loop : 오디오 끝까지 재생되고 나면 다시 처음부터 재생 -->
    <!-- muted : 소리 소거(음소거) -->
    <!-- preload - auto, metadata, none -->
    <!-- auto - 사용자가 오디오을 시청하지 않아도 필요하다고 생각되면 전체 오디오(데이터)가 다운로드 될 수 있다.
                사용자가 오디오을 시청하든 안하든 영상을 미리 다운로드, 중요한 영상이나 바로 보여줘야 할 오디오에서 사용 -->
    <!-- metadata - 오디오을 다운로드 하지 않고, 오디오 재생 시간과 같은 메타 정보만 미리 가져옴 -->
    <!-- none - 오디오을 다운로드 하지 않고, 사용자가 오디오를 바로 보지 않을 확률이 매우 높은 것, 서버가 최소한의 트래픽을 유지하고 싶을 때 적용 -->
    <audio src="" controls></audio>
  </body>
</html>