- 동영상, 음성파일 첨부 가능
👉 입력(video)
<!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>
<!-- controls - 비디오 관련된 재생, 멈춤, 음성 등 조정을 위한 UI가 제공 -->
<!-- autoplay - 자동실행 -->
<!-- muted - 음소거 -->
<!-- loop - 영상이 끝에 가면 처음부터 실행 -->
<!-- poster - 영상 실행 전 보이는 썸네일 이미지 -->
<!-- track = 자막 설정 -->
<!-- freload : auto. metadata, none -->
<!-- auto : 사용자가 영상을 시청하든 안하든 영상을 미리 다운로드, 시청할 확률이 매우 높고,
영상 플레이 했을 때 바로 보여줘야 하는 중요한 영상 -->
<!-- metadata : 영상을 다운로드 하지 않고, 영상 상영 시간과 같은 메타 정보만 미리 가져옴 -->
<!-- none : 영상을 다운로드 하지 않고, 사용자가 영상을 바로 보지 않을 확률이 매우 높은 것, 서버가 최소한의 트래픽을 유지하고 싶을때 적용 -->
<video
src="./media/bootcamp.mp4"
poster="./media/bootcamp.png"
width="320px"
controls
muted
loop
></video>
<br />
<video src="./media/bootcamp.mp4" width="320px" controls>
<track
src="./media/bootcamp.en.vtt"
kind="subtitles"
srclang="en"
label="영어(English)"
/>
<track
src="./media/bootcamp.ko.vtt"
kind="subtitles"
srclang="ko"
label="한국어(Korean)"
/>
</video>
</body>
</html>
👉 입력(audio)
<!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 : 음소거 -->
<!-- freload : auto. metadata, none -->
<!-- auto : 사용자가 오디오를 시청하든 안하든 오디오를 미리 다운로드, 청취할 확률이 매우 높고,
영상 플레이 했을 때 바로 보여줘야 하는 중요한 오디오 -->
<!-- metadata : 오디오를 다운로드 하지 않고, 오디오 상영 시간과 같은 메타 정보만 미리 가져옴 -->
<!-- none : 오디오를 다운로드 하지 않고, 사용자가 오디오를 바로 보지 않을 확률이 매우 높은 것, 서버가 최소한의 트래픽을 유지하고 싶을때 적용 -->
<audio src="./media/bootcamp.mp3" controls></audio>
</body>
</html>
-