html5 의 새로운 엘리먼트1 – 구조적 마크업에 이어 이번에는 html5에서 새롭게 등장하는 태그 중 임베디드 컨텐츠(텍스트를 제외한 컨텐츠들) 와 관련된 태그들에 대해서 알아보겠습니다.
참고로 <embed> 는 비표준 태그였고, 유일하게 html5 에서만 표준입니다.
<audio>
음악파일삽입 시에 사용하는 태그입니다.
<audio src=”">미지원 브라우저에 보여줄 텍스트</audio>
테스트 : http://www.hy74.co.kr/study/html5/audio.html
*.ogg 파일과 *.mp3 파일 대상으로 <audio>,<object>,<emded>로 테스트 함.
- 익스 6,7,8 : <embed>의 mp3 파일만 재생 (나머지는 모두 불가)
- 파폭 3.6 : <audio>태그는 ogg 파일 지원 / <object>,<emded>는 mp3만 지원
- 오페라 10 : <audio> 지원안됨 / <object>,<emded>는 mp3만 지원
- 사파리 4 : <audio>의 mp3만 지원
- 크롬4 : 모두 지원!!!!!
<video>
비디오파일삽입 시에 사용하는 태그입니다.
<video src=”">미지원 브라우저에 보여줄 텍스트</video>
테스트 : http://www.hy74.co.kr/study/html5/video.html
*.ogv 파일과 *.wmv 파일 대상으로 <video>,<object>,<emded>로 테스트 함.
- 익스 6,7,8 : 비표준 <embed>의 wmv 파일만 재생 (나머지는 모두 불가)
- 파폭 3.6 : <video>태그는 ogg 파일 지원 / <object>태그도 ogg 파일 지원 / <emded>는 미지원
- 오페라 10 : 모두 미지원
- 사파리 4 : 모두 미지원
- 크롬4 : 모두 미지원
<source>
<video>나 <audio>같은 미디어 요소의 원천소스를 정의합니다.
속성으로 media(브라우저가 다운로드 할것인지 아닌지를 위해 미디어리소스의 타입을 정의),
src 는 미디어가 있는 주소,
type은 오디오의 스트림을 플레이어가 어디서 부턱 시작할 것인지를 결정하는 숫자 지정)이 있습니다.
이들 속성을 통해서 해당 매체해 대해 좀 더 정확한 정보를 브라우저에게 전달해 줍니다.
<audio>
<source src=”/music/good_enough.wma” type=”audio/x-ms-wma” />
<source src=”/music/good_enough.mp3″ type=”audio/mpeg” />
<p>If you are reading this, it is because your browser does not support the HTML ‘audio’ element.</p>
</audio>
<figure>
<figure> 는 일러스트레이션, 다이어그램, 사진, 코드와 같은 내용들에 대해 캡션을 다는 방식으로 사용되어 질수 있습니다.
전체 문서 구조에 들어가지 않고, 사이드나 전용 페이지, 또는 부록 등에 이용되어 질수도 있습니다.
<legend> 요소와 함께 쓰면서 삽입된 주요컨텐츠에 대한 설명을 하는 역할을 해줍니다.
예를들어, 3장의 사진이 모두 ‘설악산’ 사진이라면,
<figure>로 묶어주고 <figure> 안에 <legend>를 사용하여 ‘설악산….하는 사진들’ 이라고 표기해 줄 수 있습니다.
<embed>
비표준 태그였던 <embed>가 html5에서는 표준으로 나왔습니다. (html5에서만 표준임.그 외 모든 버전에서 비표준)
플러그인과 같은 임베디드 컨텐츠를 정의하는데 쓰입니다.
(html 내에 인터랙티브한 컨텐츠나 확장 어플리케이션을 임베딩할때 쓰임)
<embed type=”video/quicktime” src=”/web_design/paris_vegas.mov” width=”340″ height=”140″ />
<canvas>
<canvas>요소는 즉각적인 그래픽 요소를 만들어 내는데 사용될 수 있는데,
일반적인 그래픽 요소부터 게임 그래픽, 그외 비쥬얼적 이미지를 랜더링 할 수 있습니다.
<canvas>에 그림을 그릴려면 getContext(contextId) 메소드와 함께 사용되어져야 합니다.
<canvas></canvas> 사이에는 대체콘텐츠가 들어갑니다.
테스트 : http://www.hy74.co.kr/study/html5/canvas.html
<canvas>에 아이디를 부여하고, 스크립트를 통해 아래와 같이 사용할 수 있습니다.
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (0, 0, 150, 75);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (40, 30, 125, 75);
ctx.fillStyle = "rgb(0,0,150)";
ctx.strokeRect (20, 20, 50, 100);
}
<audio>와 <video> 엘리먼트를 제외하고는 표준 브라우저들의 최신 버전에는 대부분 뷰 화면을 정상적으로 확인할 수 있었습니다.
다만, 위 두가지 요소들의 컨트롤박스가 브라우저마다 너무 다양해서,
권고안이 나왔을 경우에도 어떻게 될련지 조금은 걱정스럽습니다.
대략 정리해 보면,
컨트롤박스의 디자인과 크기가 브라우저마다 차이가 큼.
오토플레이에 대한 디폴트 값이 브라우저마다 다름.
사파리의 플레이/정지 버튼이 다른 것들과 반대로 동작됨.
<audio>에 대해서는 크롬이 완벽한 대응을 하고 있는 것으로 보이고.
<video>는 파폭이 그나마 가장 안정적으로 재생시키 줍니다.
<video>에 대해서는 모바일 브라우저와 관련하여 추후에 다시 포스팅할 예정입니다.
추가내용.2010.05.06. AUDIO 태그 브라우저별 음원 지원 현황
