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>
출처 : http://blog.daum.net/webnara/6147295
기본적으로 사용하는<embed> 나 <bgsound> 대신 <object>를 이용해서
음악이나 동영상을 올리는 방법입니다.
<object>를 이용하면 음악을 좀더 많이 제어 할 수 있습니다.
또 최근 우연치않게;; 웹사이트에서 <embed>를 막은곳도 보이고;; 해서;
|
<OBJECT classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300"> |
ㅁ결과...(음악파일경로=http://myhome.naver.com/jslstory/05.wma)
윈도미디어플레이어로 음악을 재생시키기 위해 흔히들 사용하시는 소스입니다.
이 소스에 보시면 PARAM속성이 많이 지정이 되어 있는데...
이 속성의 역할과 활용에 대해 간단히 알아보기로 하겠습니다.
----------------------------------------------------------------------
<PARAM NAME="Filename" VALUE="음악 파일 경로">
이 부분에서 음악 파일 경로를 삽입하고,
밑부분의 <param name> 부분은 기능을 제어하는 태그입니다.
만약 링크 못가져가게 마우스 우측 클릭 후 나타나는 정보창을 막고자 한다면,
<param name="EnableContextMenu" value="false">
이 부분에서 value 값을 true 혹은 false 로 지정하면서 제어할 수 있습니다.
보기와 같이 false로 지정하면 우측 클릭을 해도 반응을 하지 않습니다.
이제 하나하나의 기능을 살펴봅시다.
|
<param name="ClickToPlay" value="true"> |
|
: 동영상 등을 재생할때 화면을 클릭하면 일시 정지되거나 다시 재생하는 기능을 제어하는 기능입니다. true / false로 제어합니다. |
|
<param name="AutoSize" value="true"> |
|
: 화면의 비율을 자동으로 제어할 것인지, 말 것인지를 제어하는 기능입니다. |
|
<param name="AutoStart" value="true"> |
|
: 플레이어창이 뜨면서 자동실행 여부, 즉 autostart와 같은 기능입니다. false로 해놓으면 재생 버튼을 클릭해야 플레이 됩니다. |
|
<param name="ShowControls" value="true"> |
|
: hidden 태그와 같은 기능으로 false로 지정시 플레이어가 보이지 않게 됩니다. |
|
<param name="ShowAudioControls" value="true"> |
|
: 이 기능은 플레이어 우측의 볼륨 조절기능과 음소거 기능을 제어하는 기능입니다. |
|
<param name="ShowDisplay" value="false"> |
|
: 이 부분은 플레이어 아래에 파일의 디스플레이 정보를 출력할 것인가 말것인가를 제어하는 부분입니다. |
|
<param name="ShowTracker" value="true"> |
|
: 재생 구간을 보여주는, 재생이 되면서 옆으로 움직이는 막대, 트랙커를 제어하는 기능입니다. |
|
<param name="ShowStatusBar" value="true"> |
|
: 플레이어 아래에 버퍼링과 남은시간/총시간 을 보여주는 한줄의 정보창을 제어하는 부분입니다. |
|
<param name="EnableContextMenu" value="true"> |
|
: 마우스 오른쪽 클릭시 나타나는 메뉴를 제어하는 기능입니다. |
|
<param name="ShowPositionControls" value="true"> |
|
: 이 부분은 플레이어의 뒤로 가기(▶▶), 앞으로 가기(◀◀) 등의 버튼을 제어하는 부분입니다. |
|
<param name="ShowCaptioning" value="false"> |
|
: 동영상 등의 자막이 있을때 이를 제어하는 기능입니다. |
|
<param name="AutoRewind" value="true"> |
|
: 재생이 끝났을 경우 이 부분을 true로 해놓으면 처음으로 돌아갑니다. |
|
<param name="PlayCount" value="1"> |
|
: <embed>의 loop와 같은 기능으로 플레이 반복 횟수를 결정합니다. |
|
<param name="Volume" value="0"> |
|
: 재생시 자동으로 설정할 볼륨 량을 지정해주는 부분입니다. |
출처 : http://ohyung.net/index.php?pl=127
플래쉬나 동영상을 걸때 w3c Valid 띄우는법
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/wzO3Q-HMUyM"></param><embed src="http://www.youtube.com/v/wzO3Q-HMUyM" type="application/x-shockwave-flash" width="425" height="350"></embed></object>- UTUBE 기존 방식 -
<embed src='http://dory.mncast.com/mncHMovie.swf?movieID=N200668132027' width='420' height='374' allowScriptAccess='never' type='application/x-shockwave-flash'></embed>- MNCast 기존 방식 -
위와 같은 방법으로 W3C체크를 하게 되면 에러가 발생합니다.
embed 관련 에러가 쭉쭉 나오게 되죠...
embed 자체를 쓰지 않고 opject와 param만으로 플래쉬나 동영상을 걸 수 있습니다.
아래가 그 방법 입니다.
<object type="application/x-shockwave-flash" data="플래쉬주소" width="420" height="374"><param name="movie" value="플래쉬주소" /><param name="quality" value="best" /><param name="FlashVars" value="playerMode=embedded" />죄송합니다 Flash를 사용할 수 없습니다.</object><object type="application/x-shockwave-flash" data="http://dory.mncast.com/mncHMovie.swf?movieID=N200668132027" width="400" height="326" id="VideoPlayback"><param name="movie" value="http://dory.mncast.com/mncHMovie.swf?movieID=N200668132027" />
<param name="allowScriptAcess" value="sameDomain" />
<param name="quality" value="best" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value="noScale" />
<param name="salign" value="TL" />
<param name="FlashVars" value="playerMode=embedded" />
</object>이것은 플래쉬 용입니다.
<object type="video/x-ms-wmv" data="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" width="320" height="260">
<param name="src" value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="autostart" value="true" />
<param name="controller" value="true" />
</object>이것은 wmv용입니다.
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="260">
<param name="src" value="http://www.sarahsnotecards.com/catalunyalive/diables.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<!--[if !IE]>-->
<object type="video/quicktime" data="http://www.sarahsnotecards.com/catalunyalive/diables.mov" width="320" height="260">
<param name="autoplay" value="false" />
param name="controller" value="true" />
</object>
<!--<![endif]--></object>이것은 mov 파일용입니다.
위의 것들을 이용하면 avi나 mp3등등도 재생 할 수 있습니다.
.asf video/x-ms-asf
.avi video/x-msvideo
.mov video/quicktime
.mp3 audio/mpeg
.mpeg video/mpeg
.mpg video/mpeg
.wav audio/wav
하나씩 웹표준을 지켜가려고 노력해봅시다 ^^;
예제로 몇개 더 올려봅니다.
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/g2VCfOC69jc" style="width:450px;height:350px"><param name="movie" value="http://www.youtube.com/v/g2VCfOC69jc" /><param name="quality" value="best" /><param name="scale" value="noScale" /><param name="wmode" value="transparent" /><param name="FlashVars" value="playerMode=embedded" />Flash를 사용할 수 없습니다. 원본은 h ttp://www.youtube.com/v/g2VCfOC69jc 입니다</object>글출처 : http://hyeonseok.com/pmwiki/index.php/Markup/Object
