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 상에서 Condition 을 사용하여 Contents 를 제어 할 수 있다. 이것을 이용하면 표준 코드와 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”>
<!– Hixie method –>
<!–[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 로 Flash player 를 로딩하고 embed 된 object 는 conditional comment 로 주석으로 인식이 된다. 표준 브라우져들은 첫번째 classid 에 해당하는 object 가 없기 때문에 object 를 로딩하는데 실패를 하게 되고 fallback 인 하위 element 를 불러오게 된다. Conditional comment 는 IE 전용의 코드이기 때문에 영향을 받지 않고 주석으로 처리 된다. 하위 object 안의 img 는 Flash player 가 없을 경우의 fallback 을 제공한 것이다.

관련링크

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

IE Eolas Patch 해결 간단 스크립트

IE의 Eolas Patch를 간단하게 보정하는 스크립트이다. IE의 경우 <object>등의 상위 엘리먼트를 넣어주면 HTML을 지우고 스크립트로 삽입하여 테두리가 생기지 않고 바로 사용자 입력을 받게 해 준다. 컨텐츠의 접근성을 위해서 document.write로 삽입하지 않고 HTML상에 컨텐츠를 일단 삽입하고 script로 처리하는 방식이다.

Script

반드시 외부파일로 만들어서 <script type=”text/javascript” src=”ie-html-rewrite.js”></script>와 같이 불러들여야 한다.

function IE_HtmlRewrite(objParent) {

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

}

HTML

스크립트를 <object>바로 아래에 넣어도 되고 window.onload 이벤트로 넣어도 된다.

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

주의 할 점은 플래시에서 <param>을 이용해서 flashvar를 <object>로 넘기는 경우 값이 넘어가지 않게 된다. 이 경우 flashvar로 넘기지 않고 data나 movie에 GET방식으로 넘기면 된다.

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

기본적으로 사용하는<embed> 나 <bgsound> 대신 <object>를 이용해서
음악이나 동영상을 올리는 방법입니다.
<object>를 이용하면 음악을 좀더 많이 제어 할 수 있습니다.
또 최근 우연치않게;; 웹사이트에서 <embed>를 막은곳도 보이고;; 해서;

ㅁ결과…(음악파일경로=http://myhome.naver.com/jslstory/05.wma)

윈도미디어플레이어로 음악을 재생시키기 위해 흔히들 사용하시는 소스입니다.
이 소스에 보시면 PARAM속성이 많이 지정이 되어 있는데…
이 속성의 역할과 활용에 대해 간단히 알아보기로 하겠습니다.

———————————————————————-

<PARAM NAME=”Filename” VALUE=”음악 파일 경로”>
이 부분에서 음악 파일 경로를 삽입하고,
밑부분의 <param name> 부분은 기능을 제어하는 태그입니다.

만약 링크 못가져가게 마우스 우측 클릭 후 나타나는 정보창을 막고자 한다면,
<param name=”EnableContextMenu” value=”false”>
이 부분에서 value 값을 true 혹은 false 로 지정하면서 제어할 수 있습니다.
보기와 같이 false로 지정하면 우측 클릭을 해도 반응을 하지 않습니다.

이제 하나하나의 기능을 살펴봅시다.

플래쉬나 동영상을 걸때 w3c Valid 띄우는법

위와 같은 방법으로 W3C체크를 하게 되면 에러가 발생합니다.
embed 관련 에러가 쭉쭉 나오게 되죠…

embed 자체를 쓰지 않고 opject와 param만으로 플래쉬나 동영상을 걸 수 있습니다.
아래가 그 방법 입니다.

위의 것들을 이용하면 avi나 mp3등등도 재생 할 수 있습니다.

[출처]