세상을 마크업하자!

<object>, <parameter> 요소는 문서안에 다른 종류의 미디어를 삽입하는 데에 쓰인다. 예를 들어서 플래시 무비나 동영상 등을 문서안에 삽입할 때 이 HTML 요소를 사용한다.

<object> 태그와 대체 텍스트

<object> 태그는 포함하고 있는 컨텐츠를 대체 컨텐츠로 인식한다.

<object data="" type="">
	<p></p>
</object>

위의 경우 type에 지정된 적절한 플러그인을 찾을 수 없을 경우, 포함하고 있는 <p></p>의 내용을 대체 내용으로 이용하게 된다. <object>안에 다른 <object>를 중첩해서 사용하는 것도 가능하다.

<!-- 플래시 플러그인 -->
<object data="hello.swf" type="application/x-shockwave-flash">
	<!-- PNG 이미지 -->
	<object data="hello.png" type="images/png">
		<!-- GIF 이미지 -->
		<object data="hello.gif" type="images/gif">
			<!-- 일반 text -->
			<p>Hello!</p>
		</object>
	</object>
</object>

위와 같은 코드를 실행할 경우 브라우져는 바깥의 <object>부터 실행을 시도하고 실행을 시도한 플러그인의 실행을 실패 할 경우 안쪽의 <object>로 실행을 시도 한다. 각각의 <object>가 자신을 포함하고 있는 상위 <object>의 대체 컨텐츠 역할을 하게 되고 가장 깊이 있는 <p>는 상위 gif 이미지 <object>의 대체 내용이 된다.

Flash Object 표준으로 삽입

Macromedia Default

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="flash_movie" align="middle">
	<param name="allowScriptAccess" value="sameDomain">
	<param name="movie" value="flash_movie.swf">
	<param name="quality" value="high">
	<param name="bgcolor" value="#ffffff">
	<embed src="flash_movie.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="Untitled-1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>

이 코드는 Macromedia Flash MX 2004 에서 publish 한 것으로 Macromedia 에서 제시한 일종의 cross-browsing code 이다. IE 에서는 classid 를 참조하여 Flash player 를 로딩을 하고 다른 브라우져에서는 embed 를 이용하여 Flash player 를 불로오도록 fallback 을 제공한 것이다. 하지만 이 방법은 deprecated element 인 embed 를 사용하고 있기 때문에 Valid 한 html 코드가 아니다.

W3C 표준 코드를 이용한 Flash player 로딩

<object type="application/x-shockwave-flash" data="images/banner.swf" width="140" height="40">
</object>

Object 표준을 사용하게 되면 실행될 데이터의 type 과 위치를 지정하는 data 만으로 Flash 등을 로딩 할 수 있다 . 하지만 IE 는 data 를 참조하여 Flash player 를 로딩하지 못하므로 IE 에서는 작동을 하지 않는다. 그래서 param 으로 무비 정보를 적어주어야 한다.

<object type="application/x-shockwave-flash" data="images/banner.swf" width="140" height="40">
	<param name="movie" value="images/banner.swf" />
</object>

이렇게 하면 valid 한 코드로 flash 무비를 불러올 수 있다. 하지만 IE 는 classid 가 없기 때문에 .swf 파일이 완전히 로드되기 전에는 무비가 나오지 않는다. 다시 말해서 flash 의 강점인 스트리밍 기능이 작동을 안해서 프리로딩 같은 기능을 사용할 수 없다. Flash 가 완전히 로딩될때 까지 사각형 박스가 생겨서 클라이언트의 클레임을 받을 수 있다. (실제로 클레임을 제기하는 클라이언트가 있었다.)

Flash Satay

A List Apart의 Flash Satay: Embedding Flash While Supporting Standards 방법을 이용하면 IE 의 오작동을 어느정도 피할 수 있다. 무비를 불러올때 크기(file size)가 아주 작은 container movie 를 사용하하여 미리 Flash player 가 로딩 될 수 있게 하면 프리로딩이나 스트리밍 문제는 해결 된다. 하지만 네트웍 상황이 좋지 않을때에 박스가 나오는 것은 어쩔 수 없다.

Hixie method

IE에는 HTML 상에서 조건문을 사용하여 내용을 제어하는 기능이 있다. 이것을 이용하면 표준 코드와 object fallback 을 이용해서 Flash player 뿐만 아니라 다른 object 들도 페이지에 삽입 할 수 있다.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400">
	<param name="movie" value="flash_movie.swf">
	<!--[if !IE]> <-->
	<object type="application/x-shockwave-flash" data="flash_movie.swf" width="550" height="400">
		<p><img src="flash_movie.png" alt="" /></p>
	</object>
	<!--> <![endif]-->
</object>

IE에서는 바깥쪽의 classid로 플래시 플레이어를 로딩하고 안쪽의 IE Conditional Comment로 처리된 오브젝트는 주석으로 인식이 된다. 표준 브라우져에서는 바깥쪽의 classid에 해당하는 플러그인이 인식이 안되기(IE전용) 때문에 오브젝트를 로딩하는데 실패를 하게 되고 대체내용(fallback)인 하위 오브젝트를 불러오게 된다. 컨디셔널 코멘트는 IE 전용의 코드이기 때문에 영향을 받지 않고 주석으로 처리 된다. 하위 오브젝트안의 이미지는 플래시 플레이어가 없을 경우의 대체 내용을 제공한 것이다.

asp 코드에서 위의 코드를 사용하면 오브젝트 중첩 오류가 발생하는데 첫번째 오브젝트를 <%="<object"%>와 같이 표기하여 오류를 피할 수 있다.

관련링크

• W3C : Generic inclusion: the OBJECT element
• FlashVars Browser Support
• Macromedia Flash OBJECT and EMBED tag syntax
• MSDN : About Conditional Comments

function IE_HtmlRewrite(objParent) {
	if (window.ActiveXObject && objParent) {
		objParent.innerHTML = objParent.innerHTML;
	}
}

<div id="flash-movie">
	<object type="application/x-shockwave-flash" data="movie.swf">
	</object>
</div>
<script type="text/javascript">IE_HtmlRewrite(document.getElementById("flash-movie"))</script>

<object type="application/x-shockwave-flash" data="movie.swf?myvar=myvalue">
</object>