html & css/개념
비디오와 오디오
by Doo Hee
2023. 7. 2.
<!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>
