[HTML] 오디오, 비디오, 자막

1. <audio>

• 오디오를 배치할 때 쓰이는 태그다.
• 기본적인 형식은 <audio> </audio>이다.
• 사용되는 속성으로는 controls, src, loop, autoplay가 있다.
• controls은 플레이나 재생버튼 등의 제어기가 표시되는것을 True로 설정해 표시하게 명시한다.
• src는 파일위치, loop은 끝나고 다시 처음부터 재생여부, autoplay는 자동으로 플레이(권장x)

See the Pen Untitled by siloam72761 (@siloam72761) on CodePen.

 

 

 

2. <video>

• 비디오를 배치할 때 쓰이는 태그다.
• 기본적인 형식은 <video> </video>이다.
• audio에서 처럼 여러개의 video파일을 src에 저장하고 웹이 제일 먼저 호환되는 파일을 선택하게 한다.
• 네트워크 상황에 따라 화질이 높거나 작은 비디오 파일을 보낼 수는 없다.
• adaptive bitrate streaming 기술을 사용하면 네트워크 상황에 따라 높거나 낮은 화질을 제공할 수 있다.
• 이러한 기술을 사용하는 회사는 넷플릭스나, 유투브가 사용한다.

See the Pen Untitled by siloam72761 (@siloam72761) on CodePen.

 

 

3. <track>

• 자막을 사용할 때 쓰이는 태그다.
• 사용되는 속성으로는 src, label, kind, srclang이 사용된다.
• src는 WebVTT 파일 URL,  label은 사용자가 자막설정할 때 보는 단어다. (자막창에서 자막 고를 때 English, Spanish)
• kind은 해당 파일의 유형을 나타낸다. captions, subtitles, descriptions, chapters, 등이 있다.
• srclang은 파일의 언어 값이다. (en, de, es)   
• defualt를 추가할 경우 default로설정된 track이 기본값임을 가르킨다.  
• 예시 <track src = (파일명.vtt)  kind = "captions"  labels = "English" srclang= "en" default>
• 아래 코드는 Safari에서만 자막이 제대로 작동한다. 

See the Pen Untitled by siloam72761 (@siloam72761) on CodePen.