html. 멀티미디어(video/audio) 태그 - 추가설명

HTML 기본 태그 총정리 (hyperlink O)

멀티미디어 part 참고.

 

<audio>

- 소리 컨텐츠 포함

- controls 속성 = 플레이어로 수동 재생 / autoplay 속성 = 자동 재생 (두 속성중 하나 이용)

- <source> 태그 사용 방법 

<audio>
    <source src="./assets/audios/thisisyjin.wav" type="audio/wav">
    <source src="./assets/audios/thisisyjin.mp3" type="audio/mpeg">
</audio>

= 사용자의 접근성을 위해 여러개의 형식을 등록할 때 주로 사용함.

- <source>태그 사용시 src속성와 type속성을 적어줘야함.

 

 

 

<video>

- 영상 컨텐츠. (비디오 플레이백을 지원) 미디어 플레이어 삽입

- controls 속성 = 플레이어로 수동 재생 / autoplay 속성 = 자동 재생 (두 속성중 하나 이용)

 

비디오 리소스의 일반적인 미디어 타입
video/ogg
video/mp4
video/webm

오디오 리소스의 일반적인 미디어 타입
audio/wav
audio/ogg
audio/mpeg

 

<track>

- audio, video의 자식 요소.

- 자막 등 시간별 텍스트 트랙 지정시 사용.

 

---

 

 

<video>

<video src="비디오이름.확장자" poster="포스터이름.확장자" autoplay controls loop>
  <track kind="subtitles" src="자막이름.확장자" srclang="ko" label="한글자막" />
  비디오를 지원하지 않는 경우 표시할 내용
</video>

이런식으로 사용을 권장함. 🔻

<video src="rabbit320.webm" controls>
  <p>
  Your browser doesn't support HTML5 video. 
  Here is a <a href="rabbit320.webm">link to the video</a> instead.
  </p>
</video>

 

src="파일 URL"

 

- src속성 대신에

source태그로 여러 파일 지정 가능.

 

 

poster="포스터 이미지 URL"

- 비디오가 로딩되는 동안 표시할 사진 이미지.

 

autoplay

- 자동재생

 

controls

- 컨트롤러 띄움

 

loop

- 무한 반복 재생

 

muted

- 음소거

 

<track> 태그

- video나 audio의 부가 정보

- 시간정보에 따르는 자막 등.

 

- kind 속성 

: track의 종류

 

- src="파일 URL"

 

- srclang 

: 자막이 어떤 언어인지

 

 

 

 

 

<audio>

<audio src="오디오.확장자" autoplay controls loop volume>
  오디오를 지원하지 않을 경우 표시할 내용
</audio>

 

- 속성 일치. (autoplay, controls, loop, muted)

- volume 속성

: 0.0(무음) ~ 1.0(매우 큼) - 소리 지정 가능

 

- src속성 대신에

source태그로 여러 파일 지정 가능.

 

 

 

 

---

Ref.

 

Video and audio content - Learn web development | MDN

(HTML&DOM) 멀티미디어 태그 - 비디오, 오디오, 아이프레임