HTML 03

이미지 태그

<img />

ex) <img src="weare.jpg" alt="Not Image" width="300" height="300">

// 사이트 경로에서도 이미지 받아 올 수 있음.

src -> 이미지의 경로 지정

alt -> 이미지가 없을 때 나오는 글자 지정

width -> 이미지의 너비 지정

height -> 이미지의 높이 지정

지원 이미지 포맷 : JPEG, GIF, PNG, APNG, SVG, BMP, BMP ICO, PNG ICO (Chrome 기준)

오디오 태그

<audio></audio>

ex) <audio src="Music.mp3"

       preload="metadata" controls autoplay loop></audio>

// 사이트 경로에서도 이미지 받아 올 수 있음.

src -> 음악 파일의 경로 지정

preload -> 음악을 재생하기 전에 모두 불러올지 지정, metadata, none, auto

autoplay -> 음악을 자동 재생할지 지정

loop -> 음악을 반복할지 지정

controls -> 음악 재생 도구를 출력할지 지정

지원 오디오 포맷 : MP3, OGG, WAV (Chrome 기준)

비디오 태그

<video></video>

ex) <video src="video.mp4" controls poster="Loading Image.png" width="500" height="500">

// 사이트 경로에서도 이미지 받아 올 수 있음, 웹 브라우저 마다 일관되지 않으므로 video.js 플러그인을 사용하여 문재를 해결할 수 있다. (http://videojs.com)

src -> 비디오 파일의 경로 지정

poster -> 비디오 준비 중일 때의 이미지 파일 경로 지정

preload -> 비디오를 재생하기 전에 모두 불러올지 지정

autoplay -> 비디오를 자동 재생할지 지정

loop -> 비디오를 반복할지 지정

controls -> 비디오 재생 도구를 출력할지 지정

width -> 비디오의 너비를 지정

height -> 비디오의 높이를 지정

지원 비디오 포맷 : MP4(H.264 + ACC), WebM(VP8 + Vorbis), OGV(Theora + Vorbis) (Chrome 기준)

track(자막) 태그

<track/>

ex)  <video>

<track kind="subtitles" src="who.vtt" default srclang="ko" label="Korean"></track>

<track kind="subtitles" src="who.vtt" srclang="en" label="English"></track>

<track kind="subtitles" src="who.vtt" srclang="jp" label="Japanese"></track>

<track kind="subtitles" src="who.vtt" srclang="ch" label="Chinese"></track>

</video>

// srt 는 인식 못 하고 vtt로 변환 했더니 한글은 죄다 깨졌다. 이래서 video.js 플러그인 쓰라나 보다..

kind -> 텍스트 트랙의 종류를 정의, subtitles(미디어가 제공하는 언어에 대한 자막 또는 번역, 영상에 오버레이), captions(미디어가 음소거 되거나, 청각 장애를 갖고 있는 경우 필요한 대화, 음향 효과, 오디오 정보에 대한 단서와 정보, 자막, 번역, 영상에 오버레이), descriptions(미디어의 영상 부분에 대한 텍스트 형태의설명, 시각 장애, 운전 중 등), chapters(미디어를 탐색하기 위한 챕터), metadata(스크립트에서 사용할 트랙)

src -> 텍스트 트랙 데이터의 주소를 정의

srclang -> 텍스트 트랙 데이터의 언어를 정의

label -> 사용자가 읽을 수 있는 트랙 제목 정의

default -> 기본으로 최초에 나오는 track

지원 자막 포맷 : vtt, srt