[펌] 웹표준 embed

embed태그 안쓰고 크로스 브라우져로 미디어 재생하기

embed 태그가 넷스케이프 브라우져 전용이었는데 IE의 버전 얼마부터 이것이 지원됐는지 몰라도 embed 태그가 ie에서도 작동하는것 같았다. object 태그의 왼지 모를 복잡함보다 마치 img태그를 사용해 그림을 삽입하듯이 하나의 태그내에서 속성치로 설정하는게 간단해 보였다.

그런데 embed 태그는 표준이 아니고(소위 deprecated 되었다) 불편하고 복잡하다 느낀 object 태그가 표준 태그란다. 당연히 모질라/파이어 폭스 등에서도 object 태그로 미디어 파일을 인식한다. 이 경우에 embed를 이용하는 것은 위 비 ie 계열을 위해서가 아니라, 정확히는 Nescape 4.X대 구버전의 하위 호환성을 위해 삽입하는것이다.

지금까지는 obejct 태그내에 포함시킨 embed 태그는 모질라 계열을 위한 전용이라고 알았는데... 해외의 각종 포럼에서 보니까, XHTML표준을 지키는 사이트를 구현하는데 장애물 중의 하나가 바로 플래시/미디어 등을 삽입하기 위한 embed태그의 사용때문에 validation이 되지 않는 것이란다.

플래시의 경우도 저작툴에서 html을 만들어 주는데 거기에도 embed 태그를 활용하고 있다. 물론 마찬가지로 이때의 embed도 넷스케이프 하위 호환성을 위한 것이다.

그래서 표준 태그라는 object만을 이용해 Cross Brower에서 가능한 방법을 알아봤고, 또 몇몇 생각대로 되지 않는 부분도 시행착오로 알아보았다.

아래는 모질라 포럼에서 본, object 태그만 이용해 음악파일을 재생하는 형식이다.

 

<object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/

nsmp2inf.cab#Version=5,1,52,701" width="320" height="310" id="myWmedia">
    <param name="URL" value="test.wma">
    <object type="video/x-ms-asf-plugin" data="test.wma" width="320"
            height="310" id="myWmedia">
    </object>
</object>
 

 

그런데 모질라류에선 미디어플레이 창이 하나만 삽입되어 나타나는데, ie에선 창이 두개가 나타났다. 설명대로라면 하나만 인식해야 되는데...

 

다시 여기저기 찾아보다 mozillaZine 에서, 아래 코드를 보게 되었다.

<object type="video/x-ms-asf-plugin" data="http:/ /myMusic.wma" width="220" height="60">
<param name="FileName" value="http:/ /myMusic.wma" />
</object>

ie와 모질라류 모두 잘 나타났다. 그래서 갖가지 속성값을 설정하기 위해 속성값을 태그에 삽입해보면서 이런 저런 예상밖의 결과를 얻다 최종적으로 알게 된걸 정리하면,

 

<object type="video/x-ms-asf-plugin" data="http:/ /myMusic.wma" width="220" height="60">
<param name="FileName" value="http:/ /myMusic.wma" />
<param name="autostart" value= "0" />
<param name="hidden" value="0"/>
<param name="EnableContextMenu" value="0"/>

 

처음에는 가장 위의 object 태그의 data 속성 등은 모질라계열을 위한 것이라 알고, 폭/높이 속성 뒤에 autostart 등 다른 옵션을 넣었는데, 모질라계열에서도 param 값을 이용해 다른 속성을 받아 들였다.  일반적으로 autostart="true/false" 와 같이 그 속성값을 true/false의 문자열을 받아들이는데, 모질라에선 이게 먹지 않았다. 실험해본 결과 위와 같이 0/1 의 숫자로 참/거짓 값을 넣어줘야 autostart등의 속성이 제대로 먹혔다. 이때문에 처음엔 위 방식으로는 자동시작이 모질라에선 불가능한건가...하고 포기할 뻔 했다.

 

마지막 주의해야할 것은, 크기 속성 width/height를 ie에선 정하지 않을 경우 재생하는 미디어가 오디오냐 비디오냐에 따라 디폴트 크기의 창으로 나타나는데 반해, 모질라쪽에선(오페라도 마찬가지) 어느 하나의 크기만 생략되어도 아예 창이 나타나질 않았다.

 

결론적으로 아직은 페이지 디자인시 두가지 중에 하나를 선택해야 하는 문제가 발생하는것 같은데, XHTML 표준 태그를 이용해 크로스 브라우져 디자인을 할것이냐, 아니면 표준에선 한발 양보하고 하위(넷스케이프 4.X대) 호환성을 위해 object 내에 embed 태그를 삽입할 것이냐...하는 것이다.

플래시의 경우 저작도구에서 기본적으로 생성해주는 코드는 대략 아래와 같다.

 

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http:/ /fpdownload.macromedia.com/pub/shockwave/cabs/

flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="무제-1">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="무제-1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="무제-1.swf" quality="high" bgcolor="#ffffff" width="550" height="400"

  name="무제-1" align="middle" allowScriptAccess="sameDomain"

  type="application/x-shockwave-flash"

  pluginspage="http:/ /www.macromedia.com/go/getflashplayer" />
</object>

위 코드도 아래와 같은 형식으로 크로스 브라우져를 만족시킬 수 있다.

<object type="application/x-shockwave-flash" data="myMovie.swf"
width="600" height="100" wmode="transparent">
<param name="movie" value="myMovie.swf" />
<param name="wmode" value="transparent"/>
</object>

 

위의 모든 경우에 codebase 등과 같이, 재생도구가 깔려 있지 않다거나 하는 경우에 플러그인 설치를 유도하는 부분이 빠져 있다. 사실 이 부분은 그 사이트의 모든 object 태그 부분에 중복되게 삽입할 필요없이 어느 한 미디어에만 포함시키면 될 것이다.

 

Posted by byte AliBaba@KOR at 2004.08.23 03:10 PM