웹개발/HTML

Object 올바른 사용법

갈가마귀 2010. 1. 16. 12:34


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

<object date="꿈을꾸는아이_thumb.png" type="image/png">
    꿈을 꾸는 아이 썸네일 이미지입니다.
</object>
브라우저에서는 type에 지정된 적절한 플러그인을 찾을 수 없을 때 포함하는 내용을 대체로 이용하게 됩니다.
<body> 태그 자식 태그로 바로 <object>를 사용할 경우는 드물겠지만, 사용한다면 대체컨텐츠를 <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 올바른 사용 방법

개발편의상 HTML 태그보다는 구글코드에서 서비스 중인 swfobject.js를 즐겨 사용하곤 하지만, noscript 일 때 노출이 안 되므로 웹접근성을 고려하여 object 태그를 병행해서 사용하면 좋을 듯 싶습니다.
  1. Adobe 권고 방안 (매뉴얼 바로가기 for CS4)
    2. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0">
    <param name="movie" value="moviename.swf">
    <param name="play" value="true">
    <param name="loop" value="true">
    <param name="quality" value="high">

    <embed src="moviename.swf" width="100" height="100" play="true" loop="true" quality="high" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> </embed>
</object>
    ※ <embed> 태그는 IE 전용으므로 비권장 사항입니다.

  2. W3C 권고 방안 (매뉴얼 바로가기 for HTML 4.01)
    3. <object data="moviename.swf" type="application/x-shockwave-flash" width="100" height="100"></object>

    <object> 태그를 사용하게 되면 실행될 데이터의 type과 위치를 지정하는 data만으로도 flash 등을 불러올 수 있습니다. 하지만 IE는 data를 참조하여 flash player를 불러오지 못해 작동을 하지 않는 경우도 있습니다. 그래서 param으로 무비 정보를 적어주어야 합니다.
    <object data="moviename.swf" type="application/x-shockwave-flash" width="100" height="100">
    <param name="movie" value="moviename.swf">
    <p>해당 컨텐츠를 보시려면 <a href="http://www.adobe.com/kr/products/flashplayer/">Flash Player</a>가 필요합니다.</p>
</object>
    <param> 태그를 추가하여 정상적으로 flash를 불러올 수 있습니다. 하지만 IE는 classid 가 없기 때문에 .swf 파일을 완전히 다운로드하기 전에는 실행되지 않습니다. 쉽게 스트리밍 기능이 작동을 하지 않아 프리로딩 기능을 사용할 수 없습니다.

  3. W3C + swfobjct
    4. 2번 W3C 권고 방안 <object> 태그를 id 가 부여된 <div> 태그 등으로 감싸 swfobject 로 cross browser 처리를 하면 됩니다.


물론 HTML5 가 표준 정립이 되고, 사용자 브라우저가 지원을 하는 세월이 온다면 위와 같은 방법은 불필요할지 모르겠습니다. ^^