TIL 11. HTML의 여러가지 태그 #5(Media Files)

윤현묵·2021년 7월 18일
0

HTML & CSS

목록 보기
6/9

Media Files 관련 태그

  • audio: 오디오 파일을 삽입합니다. 브라우저에서 배경음악 또는 소리를 재생할 때 사용하며 src 속성을 이용하여 경로를 지정하여 사용합니다.

  • video: 비디오 파일을 삽입하며 사용법 및 사용되는 속성은 audio와 유사합니다.

  • iframe: html 문서 내에 또 다른 html 문서 또는 컨텐츠를 포함시킬 때 사용합니다.
    (유투브 영상 등 공유, iframe 태그 복사 후 붙여넣기로 사용)

사용되는 속성
-. width, height: 각각 너비와 높이 지정
-. controls: 컨트롤 막대를 표시, 속성 값 없이 controls만 입력하여 사용
-. preloda: 미디어 파일의 다운로드 시기를 지정, 기본값은 auto
(none: 버튼을 누를 때, metadata: 메타정보만 미리 다운로드, auto: 웹 페이지 로딩 시 다운로드)
-. muted: 비디오가 소리없이 화면만 재생, 속성 값 없이 muted만 입력하여 사용
-. autoplay: 미디어가 다운로드 완료되는 시점부터 자동 재생, 속성 값 없이 autoplay만 입력하여 사용
-. loop: 미디어가 종료되면 처음부터 반복 재생(무한), 속성 값 없이 loop만 입력하여 사용
-. poster: 미디어 재생 실패 문제가 발생할 경우 미디어 대신 표시할 포스터 지정
-. 추가사항: src를 따로 사용하는 방법 → 여러가지 type 명시, 브라우저 별 지원하지 않는 형식의 파일이 있기 때문에 여러가지 형식의 오디오 파일을 첨부

  • track: 비디오에 자막을 넣어줍니다. 비디오 태그안에 넣어서 사용하며, 확장자는 일반 영상 자막파일과는 다르게 주로 .vtt파일을 사용합니다.

track 태그의 속성

-. kind: 자막의 종류를 지정
-. src: 자막파일의 경로를 지정
-. srclang: 자막에 사용된 언어를 지정, kind 속성 값이 기본값(subtitle)일 경우 명시
-. label: 자막이 여러 개의 파일로 되어있을 때, 자막에 식별용 이름을 붙임
-. default: 자막이 여러 개의 파일로 되어있을 때, 기본값으로 사용되는 자막 지정

profile
진정성 있는 개발자를 꿈꾼다

0개의 댓글