Object

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

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 요소는 상위 <object data="hello.gif" type="images/gif">의 대체 내용이 된다.

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에서 퍼블리싱 한 것으로 매크로미디어에서 제시한 일종의 크로스 브라우징 코드이다. IE 에서는 classid 를 참조하여 플래시 플레이어를 로딩을 하고 다른 브라우져에서는 embed 요소를 이용하여 플래시 플레이어를 불로오도록 대체 기능을 제공한 것이다. 하지만 이 방법은 폐기된 요소인 embed 요소를 사용하고 있기 때문에 문법에 맞는 코드가 아니다.

W3C 표준 코드를 이용한 플래시 플레이어 로딩

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

표준 object 코드를 사용하면 실행될 데이터의 type과 위치를 지정하는 data만으로 플래시 등을 로딩 할 수 있다 . 하지만 IE는 data를 참조하여 플래시 플레이어를 로딩하지 못하므로 IE에서는 작동을 하지 않는다. 그래서 param 요소로 무비 경로 정보를 적어주어야 한다.

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

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

Flash Satay

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

Hixie method

IE에는 HTML 상에서 조건문을 사용하여 내용을 제어하는 기능이 있다. 이것을 이용하면 표준 코드와 object 대체 기능을 이용해서 플래시 플레이어 뿐만 아니라 다른 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로 처리된 오브젝트는 주석으로 인식이 된다. 표준 브라우져에서는 바깥쪽의 IE 전용 classid에 해당하는 플러그인이 인식이 안되기 때문에 오브젝트를 로딩하는데 실패를 하게 되고 대체 내용인 하위 오브젝트를 불러오게 된다. 이 때문에 투명모드와 같은 param 속성을 바깥 object에만 제공하게되면 안쪽의 코드를 사용하는 파이어폭스, 오페라, 사파리 등에서는 투명모드가 작동하지 않는다. param 속성을 양쪽 모두에 제공하여야 한다.

컨디셔널 코멘트는 구형 IE에서 안쪽의 object를 대체 콘텐츠로 인식하지 않고 화면에 플래시 무비를 두개 출력하는 버그를 보완하기 위한 것이다. 구형 IE에서는 안쪽의 오브젝트 태그를 모두 주석으로 인식하게 된다. 하위 오브젝트안의 이미지는 플래시 플레이어를 구동할 수 없는 환경에 대한 대체 내용을 제공한 것이다.

ASP에서는 위의 코드를 사용하면 오브젝트 중첩 오류가 발생하는데 첫번째 오브젝트를 ASP로 출력하면 오류를 피할 수 있다.

<%="<object"%> classid=...>
	<object type=...>
	</object>
</object>

IE에서 대체 콘텐츠 활성화

IE를 쓸 수 있는 환경은 대부분 플래시를 쓸 수 있는 환경이지만, 이러한 환경에서도 대체 콘텐츠를 활성화 하기 위해서는 아래와 같이 사용할 수 있다.

<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">
	<!--> <![endif]-->
		<p><img src="flash_movie.png" alt="환영합니다." /></p>
	<!--[if !IE]> <-->
	</object>
	<!--> <![endif]-->
</object>

FF, IE7, IE8, 사파리, 오페라에서 정상 작동하지만 IE6에서는 안됩니다.

관련링크

• 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>