미디어 관련 태그

✒️ 2025-05-16 11:15 내용 수정

1. audio

참고 자료 : mdn web docs audio
웹 페이지에 오디오를 넣을 때 사용한다.
src attribute이나 <source> 태그를 <audio> 태그 내에 작성하여 사용한다.

<audio controls src="./media/test.wav" type="audio/mpeg">
	브라우저가 오디오를 지원하지 않습니다
</audio>
<audio controls autoplay>
	<source src="./media/test.wav" type="audio/mpeg">
	브라우저가 오디오를 지원하지 않습니다
</audio>

속성	설명
`src`	추가할 오디오의 URL이나 디렉터리 내 주소
`autoplay`	자동으로 오디오를 재생
`controls`	페이지에서 오디오 재생 구간, 볼륨, 재생/일시정지를 조작할 수 있음
`loop`	오디오 플레이가 다 재생된 후에 다시 시작됨
`muted`	음소거 설정

2. video

참고 자료 : mdn web docs video
웹 페이지에 비디오를 넣을 때 사용한다.
<source> 태그를 <video> 태그 내에 작성하여 사용한다.

<video width="400" controls autoplay muted>
	<source src="media/test.mp4" type="video/mp4">
	브라우저가 비디오를 지원하지 않습니다
</video>

속성	설명
`width`	비디오의 너비 설정
`height`	비디오의 높이 설정
`src`	추가할 비디오의 URL이나 디렉터리 내 주소
`autoplay`	자동으로 비디오를 재생
`controls`	페이지에서 비디오 재생 구간, 볼륨, 재생/일시정지를 조작할 수 있음
`loop`	비디오 플레이가 다 재생된 후에 다시 시작됨
`muted`	음소거 설정

3. track

참고 자료 : mdn web docs track
미디어 요소인 <audio>와 <video>의 자식 요소로, 자막을 추가할 때 사용할 수 있다.
.vtt 파일이 없어 예시는 참고 자료에 나온 예시를 가져왔다.

<video controls src="/shared-assets/videos/friday.mp4">
<track
	default
	kind="captions"
	srclang="en"
	src="/shared-assets/misc/friday.vtt" />

속성	설명
`default`	트랙 기본 활성화 설정 사용자의 선호도가 다른 트랙을 지정하지 않는 한 해당 트랙이 기본적으로 활성화
`kind`	텍스트 트랙의 종류(기본 `subtitles`)
	`subtitles` : 사용자가 이해할 수 없는 언어로 된 대화의 번역 제공
	`captions` : 대화와 중요한 사운드 효과 등 모든 오디오 정보 제공
	`chapters` : 미디어 리소스의 챕터 목록 제공
	`metadata` : 스크립트에 의해 사용되는 트랙으로, 사용자에게 표시되지 않음
`label`	사용자가 선택할 수 있는 트랙 목록을 표시할 때 사용하는 트랙 제목
`srclang`	트랙의 텍스트 언어 종류
`src`	트랙의 주소이며, 반드시 유효한 URL이어야 함 (`.vtt` 파일)