[HTML/CSS] 멀티미디어

<audio> 태그 - 오디오 파일 삽입하기

<audio src = "오디오 파일 경로" [속성] [속성="속성 값"]></audio>

<audio> 태그 속성들

• autoplay : 오디오를 자동 재생
• controls : 웹 화면에 컨트롤 막대를 표시. 컨트롤 막대에는 재생/멈춤, 진행 바, 불륨 등이 표시 (플레이어)
• loop : 오디오를 반복 재생
• muted : 오디오를 재생해 진행하지만 소리는 끔
• preload : 재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해 준비해 둔다.

<video> 태그 - 비디오 파일 삽입하기

<video src = "비디오 파일 경로" [속성] [속성="속성 값"]></video>

• poster : 브라우저 문제나 인터넷 연결 문제 등 비디오를 재생할 수 없을 겨우, 비디오 화면 자리에 대신 표시하는 이미지를 '포스토 이미지'한다.

<video src = "비디오 경로" controls poster="이미지 경로"></video>

<source> 태그 - 여러 미디어 파일 한꺼번에 지정하기

<source src = "video.ogv" type = "video/ogg; codecs = 'theora,vorbis'">

• src : 미디어 파일의 경로를 지정하는 필수 속성으로 파일 경로를 지정할 때는 경로에 공백이 있으면 안된다.
• type : 웹 브라우저가 해당 미디어 재생할 수 있는지 여부를 확인할 수 있도록 미디어 파일의 유형을 알려 준다.
• codecs : 비디오 코덱을 지정

<track> 태그 - 비디오 화면에 자막 추가하기

<track kind = "자막 종류" src = "경로" scrlan = "언어" label = "제목" default>

<track> 태그의 속성

• kind 속성 : 자막의 종류를 지정. 사용할 수 있는 값은 다음과 같으며 생략할 경우 subtitles로 간주
  • subtitles : 자막이다. 소리를 켤 수 있지만 이해할 수 없는 경우, 다른 언어로 번역한 자막일 경우에 사용하며 비디오 화면에 표시된다. (기본 값)
  • caption : 캡션이다. 청각장애인용 자막이거나 소리를 들을 수 없거나 켤 수 없는 경우에 사용한다. 비디오 화면에 표시된다.
  • descriptions : 비디오 콘텐츠에 대한 설명이다. 비디오 화면에는 표시되지 않는다.
  • chapters : 비디오 탐색을 위한 장 제목이다. 비디오 화면에 표시되지 않는다.
  • metadata : 비디오 콘텐츠 정보이다. 비디오 화면에 표시되지 않는다.
• src 속성 : 자막 텍스트의 파일 경로
• srclang 속성 : 사용한 언어를 지정. kind 속성 값이 subtitle이라면 받드시 지정해야 하는데 en이나 ko처럼 언어를 나타내는 약자로 표기한다.
• label 속성 : 자막이 여러 개일 경우, 자막을 식별할 수 있도록 제목을 달아 준다.
• default 속성 : 자막 파일이 여러 개일 경우, 기본으로 사용할 자막을 default로 지정할 수 있다.