[ HTML ] 비디오 & 오디오 속성

<video> 태그 속성

1. 기본적인 속성

• controls: 비디오 재생, 멈춤, 음소거 등의 UI 버튼 제공
• autoplay: 페이지가 로드될 때 자동으로 재생
• muted: 음소거 상태로 시작
• loop: 영상이 끝나면 다시 처음부터 반복 재생
• poster: 영상이 실행되기 전에 보이는 썸네일 이미지

 

2. preload 속성 (비디오를 미리 로드하는 방식)

• auto: 사용자가 볼지 말지 관계없이 영상을 미리 다운로드, 중요한 영상일 경우 사용
• metadata: 영상 데이터를 다운로드하지 않고, 길이 등의 메타 정보만 가져옴
• none: 영상 데이터를 미리 다운로드하지 않음 (트래픽 절약)

<video src="video.mp4" controls autoplay loop muted poster="thumbnail.jpg" preload="auto"></video>

 

<track> 태그 (비디오 자막 추가)

1. 자막 관련 속성

• srclang: 자막의 언어 (ex. ko → 한국어, en → 영어)
• label: 사용자가 자막을 선택할 때 보이는 이름

2. 예제 코드

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitle_ko.vtt" kind="subtitles" srclang="ko" label="한국어 자막" default>
    <track src="subtitle_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

 

<audio> 태그 속성 정리

1. 기본적인 속성

• controls: 오디오 재생, 멈춤 등의 UI 버튼 제공
• autoplay: 페이지가 로드될 때 자동 재생
•  loop: 끝까지 재생되면 다시 처음부터 반복
•  muted: 음소거 상태로 시작
• preload: 비디오와 동일하게 작동

2. 예제 코드

<audio src="audio.mp3" controls autoplay loop muted preload="metadata"></audio>