[HTML5] 10. 멀티미디어

10. 멀티미디어

1. 오디오

- <audio>: 오디오 재생
- 속성들
  . autoplay: 웹문서 로딩 시, 자동 재생 여부
  . controls: 오디오 제어기의 표시 여부
  . loop: 오디오 반복 재생여부
  . muted: 오디오 음소거 여부
  . preload="속성값": 웹문서 로딩 시, 오디오의 로딩 상태(none[로드하지 않음], auto[기본값], metadata[오디오의 메타정보만 로드])
  . src="URL": 재생할 파일 지정

  * autoplay, controls, loop, muted 속성은 일반적으로, 별도의 속성값 없이 사용
  * autoplay 속성이 지정되면, preload 속성은 무시됨
- 오디오 형식: MP3, Wav, Ogg 형식이 주로 사용
  https://tcpschool.com/html-tags/audio

2. 비디오

- <video>: 비디오 재생
- 속성들
  . 오디오의 속성을 모두 사용
  . 추가로, width(비디오 요소의 넓이), height(비디오 요소의 높이), poster(비디오 데이터가 설정되어 있지 않거나 비디오 데이터가 로딩되는 동안에 보여 줄 이미지) 속성이 있음.
- 비디오 형식: MP4, WebM, Ogg 형식을 많이 사용
  https://m.blog.naver.com/dsz08082/221921011603

3. 기타
- <embed>: 외부 어플리케이션 지정(웹페이지, 이미지, 멀티미디어(오디오, 비디오), 플러그인 어플리케이션 등)
- <source>: 오디어, 비디오 하위요소로서 브라우저별 지원하지 않는 형식의 문제점을 해결하기 위해 여러 개의 다른 형식을 지정해서 사용 / src속성 대신 사용 / 지정 형식 중 재생가능하면, 아래 형식은 검사하지 않음.
- <track>: 오디어, 비디오 하위요소로서 자막을 처리할 때 사용, 
- <track>의 속성들
  . default: 트랙을 지정하지 않는 경우, 기본 트랙으로 활성화
  . kind="속성값": 트랙의 종류(captions[소리를 글로 옮기거나 번역한 것], chapters[장의 제목, 탐색에 사용], descriptions[비디오 내용에 대한 설명], metadata[스크립트에서 사용하기 위한 내용, 브라우저에 나타나지 않음], subtitles[자막])
  . label="트랙의 제목": 트랙의 제목 지정
  . src="URL": 트랙 파일의 URL(Uniform Resource Locator의 약자), vtt(Video Text Tracks의 약자)형식
  . srclang="언어코드": 트랙 데이터의 언어, kind="subtitles"인 경우에는 반드시 지정
- vtt 자막 처리: https://w3c.github.io/webvtt/

#HTML5 #HTML #태그 #tag #멀티미디어 #오디오 #비디오

 

참고:

- HTML 멀티미디어: https://poiemaweb.com/html5-tag-image-multimedia

HTML5 Tag - Image & Multimedia | PoiemaWeb

 

세상을 링크하라!!! 모든 링크를 한 자리에...
링크닷컴: https://linkdotcom.mycafe24.com/

유용한 링크, 링크닷컴 #무료 #링크사이트 #링크사이트