[HTML] 멀티미디어(2) - audio, video, figure, figcaption

 

▶ <audio>

• 소리 콘텐츠(MP3) 삽입.

• 속성

  - autoplay

    : 페이지에 접근해서 오디오가 준비되면(사이트 진입 시) 바로 오디오 콘텐츠 재생. boolean 값.

     autoplay 속성 지정 시 preload는 무시됨.

  - controls

    : 제어 메뉴를 표시. 재생, 소리 음량 조절, 정지 버튼 등 제어하는 메뉴.  boolean 값.

  - loop

    : 재생이 끝나면 다시 처음부터 재생 반복. boolean 값.

  - preload

    : 페이지가 로드될 때 파일을 로드할지 지정(힌트 제공). 기본값은 metadata.

     none: 로드하지 않음. 플레이되면 오디오 파일 로드.

     metadata: 메타데이터만 로드. 기본적인 정보만 가지고 있겠다는 것.

     auto: 전체 파일을 미리 로드.

  - src

    : Contents URL 명시

  - muted

    : 음소거 여부 설정. boolean 값.

 

 

▶ <video>

• 동영상 콘텐츠(MP4)를 삽입.

• 속성
  - autoplay
    : 페이지에 접근해서 준비되면(사이트 진입 시) 바로 재생. boolean 값.
     autoplay 속성 지정 시 preload는 무시됨.
  - controls
    : 제어 메뉴 표시. 재생, 소리 음량 조절, 정지 버튼 등 제어하는 메뉴. boolean 값.
  - loop
    : 재생이 끝나면 다시 처음부터 반복 재생. boolean 값.
  - muted
    : 음소거 여부 설정. boolean 값.
  - poster
    : 동영상 썸네일의 이미지 URL 명시.
  - preload
    : 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공). 기본값은 metadata.
     none: 로드하지 않음.
     metadata: 메타데이터만 로드.
     auto: 전체 파일 로드.
  - src
    : 콘텐츠 URL 명시.
  - width
    : 동영상 가로 너비 지정.
  - height
    : 동영상 세로 너비 지정.

▶ <figure>, <figcaption>

• 이미지 삽입 후 그 하단에 이미지에 대한 설명을 적는다고 가정.
  일반 태그 사용 시 브라우저 입장에서는 이미지와 텍스트가 분리되어 있으니 상호 관련 있는 내용이라고 생각하지 못함.

• <figure>, <figcaption>은 이미지와 이미지에 대한 설명이 연결되어 있다는 걸 브라우저에 알려주기 위해 사용.

• <figure>은 이미지나 삽화, 도표 등의 영역은 설정.

• <figurecaption>은 <figure>에 포함되어 이미지나 삽화 등에 대한 설명을 표시함(Figure Caption).

• 이와 같이 작업 시 브라우저, 검색엔진, 정보통신 보조 기기 등이 이러한 구조를 확인할 수 있음.