html5과 이전버전의 미디어 차이

html5 이전버전에서는 '플러그인'을 이용하여 미디어를 재생하였음.

예를 들어 '플래시 플레이어' 등이 있다.

하지만 html5에서는 이미지, 오디오, 비디오 태그 등의 미디어 기능을 자체 제공한다.

 

이미지태그

<img> 태그는 src, alt의 두 가지 필수 속성을 가짐.(src만 사용도 가능)

이미지를 선언한 태그는 참조된 이미지를 위한 공간을 생성하고

그 공간에 참조된 이미지를 참조할 수 있도록 링크 시킴.

<img src = "imgfile.jpg" alt = "이미지가 없을경우 설명" width = "" height = "">

이미지 태그의 속성

alt 이미지가 없을경우 설명

width, height 너비와 높이

src 이미지 소스 경로

이미지 태그 사용 예시 보기

 

오디오 태그 

xhtml5 에서의 태그

<audio src = "audiofile.mp3" controls = "controls" autoplay = "autoplay"></audio>

html5 에서의 태그 (파일과 MIME타입을 입력)

<audio controls loop autoplay>

    <source src =  "audiofile.mp3" type = "audio/mpeg">

    <source src =  "audiofile.ogg" type = "audio/ogg"> <!-- 위의 소스가 안될경우 -->

</audio>

오디오태그 속성

autoplay 자동재생

controls  음악 재생도구 출력 여부

loop 음악을 반복할지 여부

muted 음소거

preload 음악을 재생하기전에 불러올지 여부

src 음악파일의 경로 

 

비디오태그

비디오타입은 mp4 webm Ogg 등을 지원

webm ogg 는 익스플로러와 사파리에서 미지원

source 태그는 브라우저별 지원 가능한 비디오 파일 형식이 다르기 때문에 같은

비디오 파일을 지정하여 모든 브라우저에서 실행 가능할 수 있게 해줌.

xhtml5 에서의 태그

<video src = "videofile.mp3" controls = "controls" autoplay = "autoplay"></audio>

html5 에서의 태그 (파일과 MIME타입을 입력)

<video controls loop autoplay>

    <source src =  "videofile.mp4" type = "video/mp4">

    <source src =  "videofile.ogg" type = "video/ogg"> <!-- 위의 소스가 안될경우 -->

</video>

비디오태그의 속성

autoplay 자동재생

controls 재생도구 여부

width, height 비디오의 너비와 높이 지정

loop 비디오 반복재생 여부

muted 음소거 여부

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

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

src 비디오파일의 경로