여니씨의 귀차니즘

<OBJECT classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300">
<PARAM NAME="Filename" VALUE="음악 파일 경로">
<param name="ClickToPlay" value="true">
<param name="AutoSize" value="true">
<param name="AutoStart" value="true">
<param name="ShowControls" value="true">
<param name="ShowAudioControls" value="true">
<param name="ShowDisplay" value="false">
<param name="ShowTracker" value="true">
<param name="ShowStatusBar" value="false">
<param name="EnableContextMenu" value="false">
<param name="ShowPositionControls" value="false">
<param name="ShowCaptioning" value="false">
<param name="AutoRewind" value="true">
<param name="Enabled" value="true">
<param name="EnablePositionControls" value="true">
<param name="EnableTracker" value="true">
<param name="PlayCount" value="1">
<param name="SendWarningEvents" value="true">
<param name="SendErrorEvents" value="true">
<param name="SendKeyboardEvents" value="false">
<param name="SendMouseClickEvents" value="false">
<param name="SendMouseMoveEvents" value="false">
<param name="ShowGotoBar" value="false">
<param name="TransparentAtStart" value="false">
<param name="Volume" value="0">
</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>는 상위 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>를 막은곳도 보이고;; 해서;

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


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

----------------------------------------------------------------------



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

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

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

출처 : http://ohyung.net/index.php?pl=127

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

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

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

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