본문으로 바로가기

본문 : 외부 콘텐츠(Embeded) 요소 - IMG, MAP, OBJECT, EMBED, CANBAS, IFRAME, VIDEO, AUDIO

category 웹코딩/HTML 2015. 4. 26. 18:00

웹에서 사용하는 멀티미디어 콘텐츠들은 이미지, 비디오, 오디오, 플러그인 등 다양한 형식의 외부 콘텐츠들입니다. 이미지든 플러그인이든 외부 콘텐츠는 형식에 관계없이 object 요소로 표시할 수 있습니다. 그런데 이미지, 비디오, 오디오, 플러그인 등 외부 콘텐츠를 각각 비교해 보면 성격이 크게 다르다는 것을 알 수 있으며, 이 때문에 렌더링하는 방법도 달라질 수 밖에 없습니다.

HTML에는 이러한 렌더링 작업을 브라우저가 좀 더 신속하게 준비할 수 있도록 여러가지 표준기술을 마련해 두고 있으므로 이에 맞게 외부 콘텐츠를 넣어야 합니다. 아래에서 그 방법들을 살펴봅니다.

IMG 요소

img 요소는 멀티미디어 형식의 콘텐츠로서, 이미지를 표시한다.

<img src="bird.gif" alt="빨강 깃털, 노랑 주둥이, 짧은 다리를 가진 앵무새">

브라우저는 이런 콘텐츠를 미디어 객체(media object)로 인식하므로 object 요소로도 표시할 수 있다.

src 속성

src 속성은 이미지 소스(source)를 지정한다.

  • 소스는 파일이 있는 위치이며, URL 형식으로 표현한다.
  • 브라우저는 이미지가 있는 주소(URL)를 서버로 보내고 서버에서 보내온 이미지 파일을 문서상에 보여줄 뿐이다.

alt 속성

alt 속성은 대체 텍스트(alternative text)를 지정한다.

  • 이미지를 처리하지 못하는 경우가 발생할 경우 보여질 콘텐츠로, alt 속성값을 사용한다.
  • 스크린리더와 같은 사용자 도구가 읽어 주는 alt 속성값을 통해 해당 이미지 파일이 어떤 내용을 담고 있는지 알 수 있다.
  • 이미지로 제공하는 정보를 대체 텍스트로도 제공할 수 있도록 해야한다.
    ex) 약도 이미지에 대한 대체 텍스트는 alt="약도"가 아니라 alt="2호선 역삼역 5번 출구 방향 500m 전방 xx빌딩 10층"이라고 작성하는 것이 바람직하다.
  • 이미지 제공 목적을 고려해서 대체 텍스트를 작성해야 한다.
    ex) 이미지가 링크로 사용된 경우, 이미지가 담고 있는 내용을 설명하는 것이 아니라 링크 목적지를 알리는 것이 중요하다. 가령 상품설명으로 링크된 상품 이미지에 대한 대체 텍스트는 alt="노트북"이 아니라 alt="노트북 상세설명"이라고 작성하는 것이 좋다.
  • 시각적 흥미를 끌기 위해 별 내용없이 제공되는 이미지들은 대체 텍스트를 제공하지 않아야 한다. 이런 이미지에 대한 대체 텍스트는 alt=""로 작성하는 것이 좋다.

대체 텍스트를 제공하지 않을 경우 스크린리더는 이미지 파일명만 읽기 때문에 스크린리더 사용자는 이미지가 어떤 내용을 담고 있는지 알 수 없어 혼란에 빠질수 있다.

usemap 속성

usemap 속성은 클라이언트 사이드 맵(use a client-side map)을 지정한다.

  • 이미지에 사용된 맵이 클라이언트 사이드 방식이라는 사실과 참조해야 하는 해당 맵의 이름을 브라우저에게 알려준다.
  • 클라이언트 사이드 맵은 클라이언트 프로그램인 브라우저가 맵에 있는 링크 영역의 모양, 좌표, 참조 URL을 직접 처리할 수 있다.

자세한 내용은 map 요소에서 설명한다.

<img src="bird.jpg" alt="빨강 깃털, 노랑 주둥이, 짧은 다리를 가진 앵무" usemap="#birds-one">

ismap 속성

ismap 속성은 서버 사이드 맵(the image of server-side map)을 지정한다. 서버 사이드 맵을 사용하는 것은 마우스로 클릭해야만 해당 URL을 참조할 수 있으므로 접근성이 떨어지게 된다. 이것은 스크린리더 사용자를 어렵게 만들기 때문에 많이 사용하지 않는다.

<a href="worldmap.html">
    <img src="map.gif" alt="세계지도" ismap="ismap">
</a>

MAP 요소

map 요소는 이미지 맵(image MAP)을 표시한다.

  • 이미지 위에 클릭할 수 있는 영역을 그려 놓은 도면이 이미지 맵이고, 각 영역마다 서로 다른 링크를 제공할 수 있다.
  • 이미지 맵은 img, map, area 요소로 구성되며, map 요소가 이미지 맵이 있다는 사실을 알리는 동시에 img와 area 요소 사이를 연결시킨다.
    • img 요소 : 이미지를 표시한다.
    • map 요소 : 이미지 위에 그려진 도면을 표시한다.
    • area 요소 : 도면을 구성하는 링크 영역과 URL을 표시한다.

name 속성

name 속성은 이미지 맵 이름을 지정한다. map 요소는 반드시 name 속성을 가져야 img 요소가 map 요소를 참조할 수 있다.

<img src="bird.jpg" width="200px" height="100px" usemap="#birds-one">
<map name="birds-one">
</map>

AREA 요소

area 요소는 이미지 맵 내부에 링크 영역을 지정하는 요소이다.

<img src="bird.jpg" width="200px" height="100px" usemap="#birds-one">
<map name="birds-one">
    <area shape="rect" coords="2, 43, 89, 137" href="birds.html" alt="앵무새에 대하여">
</map>
  • 이미지 전체가 아니라 이미지 일부에만 링크를 제공하거나 이미지를 부분적으로 설명하는 경우 전체 이미지를 부분적으로 나누고 area 요소를 사용하여 각각의 영역을 표시한다.
  • area 요소는 단독적으로 사용할 수 없으며 map 요소가 area 요소를 포함한다.

shape 속성

shape 속성은 링크 영역의 형태를 지정하는 속성이다. area 요소의 영향력이 미치는 범위를 원형, 사각형, 다각형으로 표시한다. 기본값은 사각형이다.

  • shape="rect" : 링크 영역을 사각형(rectangle state)으로 지정한다.
  • shape="circle" : 링크 영역을 원형(circle state)으로 지정한다.
  • shape="ploy" : 링크 영역을 다각형(polygon state)으로 지정한다.
  • shape="default" : 링크 영역을 기본 상태(default state)으로 지정한다. 이 속성값은 coords 속성을 가질 수 없으므로 이미지 전체를 링크 영역으로 지정한다.

coords 속성

coords 속성은 area 요소의 영역 좌표(coordinates)를 지정한다.

  • 좌표는 x와 y축으로 나뉘며 coords 속성값은 shape 속성값에 따라 달라진다.

좌표값은 포토샵, 페인트 샵, 그림판등을 이용하여 값을 읽을 수 있다.

href 속성

href 속성은 문서를 참조하기 위한 속성이다. area 요소를 사용하는 주된 목적은 지정된 이미지 영역이 다른 문서와 연결되게 하는 것이므로 href 속성이 필요하다. 일반적인 href 속성의 쓰임새와 같다.

alt 속성

alt 속성 또한 일반적으로 사용되는 대체 텍스트를 위한 쓰임새와 같다. 다만 area 요소에 href 속성이 있으면 반드시 alt 속성도 있어야 하며, 반대로 area 요소에 href 속성이 없는 때에는 alt 속성도 없어야 한다.

OBJECT 요소

object 요소는 미디어 객체를 표시한다.

<object data="snsd.swf">
    <object type="image/png" data="snsd.png" width="100px" height="100px">
        <p>이 동영상은 소녀시대 콘서트 영상입니다.</p>
    </object>
</object>
  • object 요소는 다양한 형식의 멀티미디어 데이터를 처리할 수 있도록 여러가지 속성이 마련되어 있지만 항상 성공적으로 실행되는 것은 아니기 때문에 대체 콘텐츠나 폴백 콘텐츠를 작성하기도 한다.(위의 예에서는 플래시파일을 재생해보고 안되면 png 이미지파일을 안되면 p요소의 대체 글을 보여주게 된다.)
  • 다양한 속성중에서 data와 type 속성은 반드시 한 속성은 지정되어야 한다.

type 속성

type 속성은 data 속성에 의해 지정된 데이터의 MIME 타입을 지정한다. 브라우저가 object 요소를 만나면 제일 먼저 직접 처리할 수 있는 데이터인지 판가름하고 처리 가능하다면 바로 실행할 준비를 하게 되고, 그렇지 않다면 적절한 처리 방법을 찾으려고 하게 된다. 따라서 이 속성은 필수 사항은 아니고 불필요한 내려받기를 예방하기 위한 권장 사항이다.

data 속성

data 속성은 데이터가 있는 위치를 지정한다. 이 속성은 src 속성과 같이 객체를 구성하는 필수 데이터나 파일이 어디에 있는지 브라우저에게 알려준다.

PARAM 요소

param 요소는 파라미터(PARAMeter, 매개변수)를 표시한다.

<object data="intro.swf" type="application/x-shockwave-flash">
    <param name="loop" value="false">
    <param name="quality" value="high">
</object>
  • object, audio, video 요소 내에서 추가적인 정보나 매개변수를 표시하기 위한 용도로 쓰인다.
  • 하나의 object 요소에 여러 개의 param 요소가 올 수도 있다.
  • param 요소는 반드시 name(파라미터 이름)과 value(파라미터 값) 속성을 가져야 한다.

EMBED 요소

embed 요소는 외부 애플리케이션이나 인터랙티브 콘텐츠의 끼워 넣기(EMBedding)를 표시한다.

<embed src="snsd.swf">
  • 오래전 부터 브라우저들이 지원해 왔지만 정식으로 기술된 요소는 아니었다. HTML5 에서는 정식으로 사양이 제정되었다.
  • object 요소와는 달리 embed 요소는 종료 태그가 없으므로 자식 요소를 둘 수 없다.
  • object 요소를 지원하지 않는 브라우저가 있기 때문에 호환성을 높이기 위한 차원에서 또 다른 규격인 embed 요소가 제안되었다.

CANVAS 요소

canvas 요소는 HTML5에 새로이 추가된 요소로서, 캔버스(CANVAS, 그림을 그리는 영역)를 표시한다.

<canvas id="myprofile" width="300px" height="300px">
    <p>캔버스 기능이 지원되지 못할 경우, 편집하지 않은 프로필 사진을 보여준다</p>
    <img src="mypicture.jpg" alt="프로필 사진">
</canvas>

<script>
var canvas=document.getElementById('myprofile');
var context=canvas.getContext('2d');
...
</script>
  • 그래픽 콘텐츠를 표현할 때 사용하며, 스크립트에 의해 동적으로 구현되는 그래픽 콘텐츠에 적합하다.
  • 시각적 접근이 주를 이루기 때문에 스크린리더 와 같은 접근성 기기들의 정보처리가 힘들어지는 단점이 있다.

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9 FF3 SF4, iOS3.2 CH7, An2.1 O10.5

IFRAME 요소

iframe 요소는 인라인 프레임(Inline FRAME)을 표시한다.

  • 인라인 프레임은 문서 내에 다른 문서를 넣기 위한 기술이다.
  • HTML5로 바뀌면서 frame 요소는 사라졌지만 iframe 요소는 남았다.
  • HTML5에 새로이 추가된 속성 및 사라진 속성들이 존재한다.

src 속성

src 속성은 인라인 프레임으로 제공할 소스(source)를 지정한다.

sandbox 속성

HTML5에서 새로이 추가된 속성으로서, 보호구역으로 지정하여 해당 프레임에 삽입되는 페이지에 다음과 같은 제한을 둘 수 있다.

<!-- 읽기 전용의 단순 웹페이지 -->
<iframe sandbox src="example.html"></iframe>
  • 실제 존재하지 않는 도메인(오리진)에 속한 것으로 간주함. 따라서 자신이 소속된 도메인과도(allow-scripts에 의해 실행이 가능해져도) 통신할 수 없음
  • 플러그인(ActiveX, 플래시등) 실행금지
  • Javascript 사용금지
  • 폼 요소에 의한 페이지 호출금지
  • 부모 문서를 대체하는 브라우징이 불가능

위의 제한이 너무 엄격하여 iframe 안의 페이지가 동작하지 않을때는 sandbox 속성에 다음과 같은 값을 지정하여 샌드박스 제한을 완화할 수 있다.

allow-same-origin

원칙적으로 다른 도메인의 문서가 인라인 프레임을 통해 제공될 때는 부모 문서(parent document)에 접근할 수 없다. 이럴 때는 allow-same-orign 속성값을 이용하면 다른 도메인의 문서를 같은 도메인의 문서로 간주하여 부모 문서에 접근할 수 있게 된다(서버와의 통신, 스토리지 이용등).

<iframe src="http://www.example.com/test.html/" sandbox="allow-same-origin"></iframe>

allow-top-navigation

원칙적으로 다른 도메인의 문서가 인라인 프레임을 통해 제공될 때는 부모 문서를 대체하는 브라우징은 불가능하다. 이럴 때는 allow-top-navigation 속성값을 이용하면 인라인 프레임에 있는 링크를 클릭했을 때 부모 문서가 사라지고 외부 문서가 나타나게 하거나 새창을 열어 새로운 브라우징할 수 있도록 처리할 수 있다.

<iframe src="http://www.example.com/test.html/" sandbox="allow-top-navigation"></iframe>

allow-forms

원칙적으로 다른 도메인의 문서가 인라인 프레임을 통해 제공될 때는 폼 데이터를 다른 곳으로 보낼 수 없다. 이럴 때는 allow-forms 속성값을 이용하면 인라인 프레임에서 폼 데이터를 다른 곳으로 보낼 수 있다.

<iframe src="http://www.example.com/test.html/" sandbox="allow-form"></iframe>
allow-scripts

원칙적으로 다른 도메인의 문서가 인라인 프레임을 통해 제공될 때는 스크립트 실행은 허용되지 않는다. 이럴 때는 allow-scripts 속성값을 이용하면 인라인 프레임에서 스크립트를 실행시킬 수 있다. 단 팝업창은 허용되지 않는다. 스크립트는 여러 가지 보안 상의 문제를 야기시킬 수 있기 때문에 신뢰할 수 있는 문서일 경우에만 허용해야 한다.

<iframe src="http://www.example.com/test.html/" sandbox="allow-scripts"></iframe>

seamless 속성

seamless 속성은 HTML5에 새롭게 추가된 속성으로 이 속성을 지정하면 iframe에 삽입한 웹페이지는 그 부모가 되는 페이지의 일부처럼 동작한다.(자바스크립트,css 모두 부모로부터 물려 받는다) 부모 페이지의 css를 적용받고 프레임 안의 링크를 클릭하면 프레임 안의 페이지가 아닌 부모 페이지가 전환된다. 웹페이지의 일부를 지연 로딩하고 싶을때 등에 효과적 (페이지 전체가 전환)

srcdoc 속성

srcdoc 속성은 HTML5에 새롭게 추가된 속성으로 소스 문서를 지정한다. 이 속성은 인라인 프레임에 직접 HTML 문서를 작성할 수 있게 만든다. 소스 문서는 반드시 HTML 문법에 맞게 작성되어야 한다. srcdoc과 src 속성을 모두 작성하면 srcdoc를 우선 적용하는데 브라우저가 srcdoc 속성을 지원하지 못할 때는 src 속성을 참조하여 대체 콘텐츠를 보여준다.

<iframe srcdoc="<p>안녕하세요</p>" src="http://www.example.com/test.html/"></iframe>

VIDEO 요소

video 요소는 HTML5에 새롭게 추가된 요소로서, 각종 비디오 파일을을 표시한다.

<!-- 기본적인 사용 -->
<video src="movie.mp4" width="360" height="240"></video>

<!-- 브라우저 대응과 대체 콘텐츠 -->
<video width="360" height="240" controls autoplay preload="auto">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogv" type="video/ogg">
    <source src="movie.webm" type="video/webm">
    <p> 현재 사용하고 있는 브라우저는 비디오 태그를 지원하지 않습니다.(대체 콘텐츠) </p>
</video>

<!-- 브라우저 대응과 대체 콘텐츠2 -->
<video width="360" height="240" controls autoplay preload="auto">
    <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"'>
    <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=movie.mp4">
        <param name="movie" value="player.swf?file=movie.mp4">
        <a href="movie.mp4">movie 다운로드 받기</a>
    </object>
</video>
  • 특별한 플러그인을 설치하지 않고도 웹상에서 바로 비디오 파일을 구동시킬수 있도록 추가된 요소이다. 별도의 프로그램을 설치하는 행위는 언제나 보안 위협에 노출되어 있기 때문이다.
  • 브라우저 제작사들은 단일 파일 형식에 대해 의견 일치를 이루지 못했기 때문에 각각의 브라우저가 사용하는 코덱에 맞게 파일을 세분화하여 제공해야 한다.
  • source 요소를 사용해 여러개의 미디어 소스를 표시할 수 있다.

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9 FF3.5 SF4, iOS4 CH8, An2.3 O10.5

video 속성들

속성명 값 기능및 역할
autoplay autoplay, 빈값 페이지가 열리면 비디오를 자동으로 재생
controls controls, 빈값 비디오를 제어할 수 있는 컨트롤 패널 사용
preload none, auto, meta 페이지가 열리면 비디오를 미리 로드해 둠
none : 프리로드를 사용하지 않음
auto : 페이지가 모두 열리면 비디오 프리로드
meta : 페이지가 모두 열리면 비디오 메타정보만 로드
poster 이미지 UR 비디오가 로드되기 전에 보여줄 이미지 설정
loop 반복횟수, 숫자 비디오를 몇번 반복재생할 것인지 설정
width, height 픽셀단위 숫자 비디오 스테이지의 너비및 높이

AUDIO 요소

audio 요소는 HTML5에 새롭게 추가된 요소로서, 오디오 파일을 표시한다.

<audio controls>
    <source src="sound.ogg" type="audio/ogg">
    <source src="sound.mp3" type="audio/mpeg">
    <object type="application/x-shockwave-flash" data="player.swf?soundFile=sound.mp3">
        <param name="movie" value="player.swf?soundFile=sound.mp3">
        <a href="sound.mp3">sound download</a>
    </object>
</audio>
  • 브라우저에 따라 지원하는 오디오 파일이 틀리기 때문에 염두에 두고 문서를 작성해야 한다.
  • audio 태그는 전반적으로 video 태그와 사용법이 같다. 대체 콘텐츠를 삽입할 수 있으며 여러가지 속성을 부여할 수 있다.

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9 FF3.5 SF4, iOS4 CH7, An2.3 O10.5

audio 속성값들

속성값으로는 src, autoplay, controls, loop, preload가 있으며 video 속성들과 사용법이 같다(video 요소 참고).

SOURCE 요소

source 요소는 미디어 소스를 표시한다. src 속성을 사용하면 하나의 요소에 한 개의 미디어 소스만 표시할 수 있지만, 이 요소를 사용하면 하나의 요소에 여러 개의 미디어 소스를 표시할 수 있다.

source 요소에는 media 속성을 붙일수 도 있는데 이 속성을 사용해 브라우저에 화면 크기를 알아내고 화면 크기에 최적화된 다른 종류의 파일을 전송할 수 도 있다.

<source src="hi.ogg" media="(min-device-width:800px)">
<source src="low.ogg">

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9 FF4 SF5 CH10 O11

type 속성

type 속성은 미디어 파일의 MIME 종류를 지정한다. 브라우저가 웹 서버에 특정 미디어 파일을 요청하면 웹 서버는 미디어 파일에 대한 정보를 먼저 전송하면 브라우저는 이 정보를 미리 확인하여 미디어 파일을 재생하기 위한 적절한 애플리케이션을 선택할 수 있게 된다.

TRACK 요소

track 요소는 video와 audio 요소의 텍스트 트랙(text TRACKs)을 표시한다.

<video src="brave.webm">
    <track kind="subtitles" src="brave.vtt" srclang="en" label="English">
    <track kind="captions" src="brave.en.hoh.vtt" srclang="en" label="English for the Hard Hearing">
</video>
  • 트랙은 영화나 음악처럼 연속적인 콘텐츠에 포함되는 데이터 기록의 경로 또는 부분을 말한다.
  • 콘텐츠의 자막(subtitle), 제목, 부제목, 설명, 메타데이터 등 텍스트 형식의 정보를 의미하며, 이 정보를 재생시 나타날 수 있도록 설정할 수 있다.

kind 속성

kind 속성은 HTML5에 새롭게 추가된 속성으로, 텍스트 트랙의 종류(kind)를 지정한다.

  • kind="subtitles" : 자막을 제공한다. 이해하기 어려운 오디오 부분을 자막과 함께 보여주려고 할 때 사용한다.
  • kind="captions" : 캡션을 제공한다. 공공장소처럼 소리를 키울 수 없거나 청각 장애를 가진 경우를 고려하여 오디오 콘텐츠의 핵심 키워드를 캡션 형태로 보여주려고 할 때 사용한다.
  • kind="descriptions" : 텍스트 설명을 제공한다. 시각적 처리만으로는 이해하기 어렵거나 시각 장애를 가진 경우를 고려하여 비디오 콘텐츠에 별도의 설명을 제공하려고 할때 사용한다.
  • kind="chapters" : 챕터 제목을 제공한다. 챕터 단위로 이동하는 방법을 제공할 때 사용한다.
  • kind="metadata" : 메타데이터를 제공한다. 스크립트를 위한 정보이므로 사용자는 볼 수 없다.

srclang 속성

srclang 속성은 HTML5에 새롭게 추가된 속성으로, 소스 데이터의 언어를 지정한다. 소스 데이터는 텍스트 트랙에 있는 데이터를 의미하며 kind="subtitles"가 지정되었을 때만 사용할 수 있다.

label 속성

label 속성은 HTML5에 새롭게 추가된 속성으로, 텍스트 트랙 이름을 지정한다. 이 이름은 문서 제목처럼 사용자 이해를 돕기 위한 정보이며 브라우저가 텍스트 트랙을 보여줄 때 목록 제목으로 사용한다.

HTMLMediaElement 속성과 메서드

HTMLMediaElement는 video/audio 요소의 새로운 인터페이스이다. 다음에 설명할 속성과 메서드는 video 요소, audio 요소 둘 모두에서 이용할수 있다.

속성/메서드 설명
error 발생한 에러(MediaError형). 에러가 없으면 null
src 미디어 데이터의 URL. src 속성값에 대응
currentSrc 실제 로딩/재생 중인 미디어 데이터의 URL
NETWORK_EMPTY=0 networkState가 갖는 값. 요소의 초기 상태
NETWORK_IDLE=1 networkState가 갖는 값. 아직 네트워크에 접속하지 않음
NETWORK_LOADING=2 networkState가 갖는 값. 로딩 중
NETWORK_LOADING=3 networkState가 갖는 값. 로딩 완료
NETWORK_NO_SOURCE=4 networkState가 갖는 값. 지원되지 않는 형식의 미디어 파일로 로딩하지 않음
networkState 네트워크 접속 상태를 나타내는 정수 값
autobuffer 자동으로 로딩과 버퍼링을 시작할 것인가. autobuffer값에 대응
buffered 버퍼링된 범위(TimeRanges 형)
HAVE_NOTHING=0 readyState가 갖는 값. 아직 아무것도 다운로드되지 않음
HAVE_METADATA=1 readyState가 갖는 값. 미디어의 메타 데이터(재생 시간, 동영상의 넓이와 높이등) 다운로드 완료
HAVE_CURRENT_DATA=2 readyState가 갖는 값. 현재 재생 위치만큼 다운로드 완료
HAVE_FUTURE_DATA=3 readyState가 갖는 값. 현재 재생 위치에 더해 조금 더 재생할 수 있는 데이터만큼 다운로드 완료
readyState 미디어 데이터의 다운로드 상태를 나타내는 정수값
seeking 지정된 재생 위치로 이동 중인가?
currentTime 현재 재생 위치를 나타내는 정수값
startTime 재생을 시작할 수 있는 위치를 나타내는 정수 값
duration 미디어 데이터의 길이를 초 단위로 나타내는 값
paused 일시 정지 중인가?
defaultPlaybackRate 기본 재생 속도. 기본 값은 1.0
playbackRate 재생 속도. 기본 값은 1.0이며 0 이상의 값이라면 앞으로 재생하거나 마이너스 값이면 거꾸로 재생함
played 재생 완료 시간 범위(TimeRanges 형)
seekable 탐색 가능한 시간 범위(TimeRanges 형)
ended 재생이 끝났는가?
autoplay 재생할 수 잇는 상태가 되면 자동으로 재생을 시작. autoplay 속성값에 대응
loop 재생이 끝나면 처음부터 다시 반복하여 재생을 계속함. Loop 속성값에 대응
controls 각 브라우저 고유의 컨트롤 바를 표시. controls 속성값에 대응
volume 음량을 표시함. 0.0~1.0까지의 값을 가짐(1.0이 최대 음량)
muted 음을 소거했는가?
play() 동영상 재생
pause() 동영상 재생 일시 정지
load() 동영상을 다시 읽어들임(재생하지 않음)
canPlayType(type) 지정된 MIME 타입의 미디어 데이터를 재생할 수 있는가? 다음과 같은 문자열을 반환 값으로 얻음.
" "(공백문자) - 재생할 수 없음
"maybe" - 지원되는 파일 포맷임
"probably" - 아마도 재생 가능
codecs 파라미터가 없는 MIME 타입이라면 "probably"는 반환되지 않음.

HTMLMediaElement에 정의되어 있는 이벤트

이벤트 설명
loadstart 데이터 로딩 개시
progress 데이터 로딩 중(간헐적으로 여러 번 발생)
suspend 데이터 다운로드가 중지됨(에러 아님)
load 데이터 다운로드 완료
abort 데이터 다운로드가 에러에 의해 중지됨
error 에러 발생
loadend 데이터 로딩(무슨 이유든 상관없이) 완료. load, abort, error 뒤에 발생
emptied 로딩 시작과 함께 최초로 발생하는 이벤트
stalled 데이터 다운로드가 느려짐
play 재생과 함께 가장 먼저 일어나는 이벤트
pause 재생이 일시 정지됨
loadedmetadata 미디어의 메타 데이터(재생 시간, 동영상의 넓이와 높이등)를 읽어들임
loadeddata 미디어 데이터 로딩 완료
waiting 다음 프레임의 다운로드를 기다림
playing 재생이 시작됨
canplay 재생을 시작할 수 있음(재생할 수 있을 정도 로딩)
canplaythrough 이대로 다운로드 속도가 계속되면 마지막까지 재생할 수 있음(재생할 수 있을 정도로 로딩)
seeking 지정한 재생 위치로 이동중
seeked 지정한 재생 위치로 이동했음
timeupdate 재생 중(간헐적으로 여러 번 발생)
ended 재생 완료
ratechange 재생 속도가 변경됨
durationchange 미디어 데이터의 길이가 변함(메타 데이터를 읽을 때 발생)
volumechange 음량이 변경됨

source 요소의 속성과 메서드

source 요소의 DOM 인터페이스가 가진 속성과 메서드이다.

속성/메서드 설명
src 미디어 데이터의 URL. src 속성값에 대응
type 미디어 데이터의 MIME 타입. type 속성값에 대응
media 미디어 데이터의 이용 조건인 미디어 쿼리를 지정. media 속성값에 대응

TimeRanges의 속성과 메서드

HTMLMediaElement의 buffered, played, seekable 속성은 시간의 범위를 나타내는 TimeRanges 객체를 반환 값으로 얻는다. TimeRanges의 속성과 메서드는 다음과 같다.

속성/메서드 설명
length 인덱스의 최댓값을 반환
start(index) 지정한 인덱스의 시작 위치에 따른 재생 위치를 반환(초 단위)
end(index) 지정한 인덱스의 종료 위치에 따른 재생 위치를 반환(초 단위)

MediaError 속성과 메서드

HTMLMediaElement의 error 속성에 포함된 에러 객체(MediaError 형)이다.

속성/메서드 설명
MEDIA_ERR_ABORTED=1 미디어 데이터의 다운로드가 사용자에 의해 중지됨
MEDIA_ERR_NEWORK=2 네트워크 에러 때문에 다운로드가 중지됨
MEDIA_ERR_DECODE=3 미디어 데이터의 디코딩 실패
MEDIA_ERR_SRC_NOT_SUPPORTED=4 지원되지 않는 미디어 형식
code 에러코드, 위의 1~4 값 중 하나


'웹코딩 > HTML' 카테고리의 다른 글

본문 : 링크(Link) 요소 - A  (0) 2015.04.28
본문 : 제목(Heading) 요소 - H1~H6, HGROUP  (0) 2015.04.27
본문 : 내용(Content) 요소 - P, BLOCKQUOTE, UL, OL, DL, HR, FIGURE, DIV, PRE  (0) 2015.04.25
본문 : 섹션(Section) 요소 - BODY, HEADER, NAV, SECTION, ARTICLE, MAIN, ASIDE, FOOTER  (9) 2015.04.24
HEAD(문서 머리) 영역 #3 - LINK 요소  (0) 2015.04.17
댓글 , 엮인글
WEBDIR
블로그 이미지 흉내쟁이 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바