본문 바로가기

HTML

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

728x90
반응형

 

▶ <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).

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

 

 

 

 

 

 

728x90
반응형