Object 태그

카테고리 없음 2012. 12. 11. 16:07

Audio


웹페이지에 음악을 집어넣는 가장 단순한 방법은 a href 링크를 이용하는 것입니다만 세련되지 못한 방법입니다.


그렇다면 다른방법은 무었이 있을까요? 예전에 사용하던 방식으로 Netscape용 <embed> 와 InternetExplorer(이하 IE) 용 <bgsound> 를 사용하는 방법이 있습니다. 하지만 이제는 시대의 유물이 되었습니다. 현재는 <object> 를 사용합니다. 다음은 <object> 태그를 사용하여 mp3 파일을 삽입하는 기본 코드입니다.


<object type="audio/x-mpeg" data="test.mp3" width="160" height="20" autoplay="false"></object>


"type"은 파일의 특성(mp3, mov, ra 등..)을 확인하는 mime type 입니다. "data" 는 url 처럼 출력을 원하는 파일을 가르킵니다. test.mp3 를 출력을 원하는 파일의 이름이나 주소로 변경하면 됩니다. "width"와 "height"로 컨트롤러의 사이즈를 결정합니다. "autoplay"는 말 그대로의 뜻입니다. 그리고 모든 브라우저에서 인식되는것은 아니지만 추가적인 속성들을 사용할 수 있습니다.


지금까진 매우 쉽지만, 이제 조금씩 복잡해 집니다. 위의 코드는 W3C규약에 따른 필요한 모든것과 여러 브라우저들을 지원하기 위한 정보들을 모두 가지고 있습니다. 하지만 엿같은 IE가 항상 말썽이죠. IE6, 7 이 원하는 코드를 조금 추가해줘야 합니다.


<object type="audio/x-mpeg" data="test.mp3" width="160" height="20" autoplay="false">
    <param name="src" value="test.mp3" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
</object>


"param" 태그는 <object> 안의 내용과 같은 내용을 포함하고 있습니다. 단지 표현을 다르게 하는것 뿐입니다. object에 속성이 추가되면 param 또한 추가 할 수 있습니다.


이제 다 끝난걸까요. 아닙니다. 이 Fucking IE 의 옛 버전에서 윈도우미디어용이 아닌 파일을 윈도우미디어로 사용할때의 문제를 해결하기 위한 방법을 추가해 줘야 합니다. 속성에 "class id" 를 추가하고 <object> 안에 또하나의 <object> 를 넣는 방식입니다. 하나는 IE를 위해 classid를 사용하고, 다른 하나는 기타브라우저들을 위해 mime type을 사용합니다. 표준을 준수하는 FireFox와 같은 착한 브라우저들은 classid 가 있는 object를 무시하고 mimetype 이 있는 object로 넘어갑니다. 하지만 IE는 classid 가 있는 object를 처리하고 나서 mimetype이 있는 object를 만나면 혼란을 일으키며 병신같은 화면출력을 만들거나 에러를 토해냅니다. 그래서 우리는 여기에 좀 독특한 주석을 달아 처리합니다. 일명 IE핵이라고 부르는 주석입니다. (IE는 정말 병신같은 브라우저입니다.) 그렇게 해서 만들어진 소스는 다음과 같습니다.


<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="160" height="20">
    <param name="src" value="test.mp3" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
    <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
    <!--[if !IE]> <-->
    <object type="audio/x-mpeg" data="test.mp3" width="160" height="20">
        <param name="src" value="test.mp3" />
        <param name="controller" value="true" />
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
        <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
    </object>
    <!--> <![endif]-->
</object>


마지막으로 일부 오래된 브라우저들(Netscape 4) 은 구식태그인 <embed>를 필요로 합니다. 이 태그는 다음과 같은 object 태그 사이에 포함될 수 있습니다.



<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="160" height="20">
    <param name="src" value="test.mp3" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
    <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
    <!--[if !IE]> <-->
    <object type="audio/x-mpeg" data="test.mp3" width="160" height="20">
        <param name="src" value="test.mp3" />
        <param name="controller" value="true" />
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
        <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />

        <embed src="test.mp3" type="audio/x-mpeg" width="160" height="20" autostart="false" controller="true" ></embed>
    </object>
    <!--> <![endif]-->
</object>


드디어 object 태그가 현재까지 사용되는 대부분의 브라우저에서 돌아갈수 있도록 완성되었습니다.


변경점.


만약 재생하려는 음악파일의 포맷이 다르다면 어떻게 해야 할까요. "type"은 다음의 목록에 따라 변경하면 됩니다.


  • au (type="audio/basic")
  • wav (type="audio/wav" or "audio/x-wav")
  • ra (type="audio/x-pn-realaudio") 
  • mp3 (type="audio/x-mpeg")
  • wma (type="audio/x-ms-wma")


"class id" 와 "codebase" 는 다음 목록에 따라 변경합니다.


  • Quicktime player :
    • classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
    • codebase="http://www.apple.com/qtactivex/qtplugin.cab"
  • Windows media player :
    • classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
    • codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
  • Real Audio :
    • id=RVOCX
    • classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
  • Flash Shockwave :
    • classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    • codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0"




비디오


오디오와 마찬가지로 가장좋은 방법은 <object>를 사용하는 것입니다. 또한 오디오에서 사용한 방법과 꽤나 비슷한 방식으로 사용합니다. 오디오에서 사용한 예제에서 type 과 파일정의만 변경해 주면 됩니다. 단지 오디오에서는 컨트롤러의 높이만 정의해 주었지만 비디오의 높이를 정의할때는 비디오파일의 높이에 컨트롤러의 높이를 더해서 정의해 주어야 합니다. 이는 일반적으로 16-20픽셀 사이입니다. 따라서 비디오의 크기가 320 x 240 이라면 320 x 256 으로 지정해 주면 됩니다. 이 모두를 적용한 소스는 다음과 같습니다.



<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">
    <param name="src" value="test.mov" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
    <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
    <!--[if !IE]> <-->
    <object type="video/quicktime" data="test.mov" width="320" height="256">
        <param name="src" value="test.mov" />
        <param name="controller" value="true" />
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
        <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />

        <embed src="test.mov" type="video/quicktime" width="320" height="256" autostart="false" controller="true" ></embed>
    </object>
    <!--> <![endif]-->
</object>


비디오포맷이 변경되면 오디오때와 마찬가지로 type 과 classid, codebases 를 변경해 주면 됩니다.


Real Media Player를 위한 별도설정


리얼미디어를 보기 위해서는 다음의 태그를 추가해 주어야 합니다.


<param name="controls" value="ImageWindow">
<param name="console" value="one">


그리고 controller 파라미터는 여기선 쓸모가 없습니다. 컨트롤러를 보기위해선 컨트롤러부분을 별도로 삽입해 주어야 합니다. 기본적으로 지금까지 작성한 object 블럭 전체를 그대로 복사해서 붙이고 console 파라미터값을 one 에서 all 로 변경해 주기만 하면 됩니다. 마지막으로 다른것들은 그대로 두고 플로그인 참조를 삭제합니다. 변경된 소스는 다음과 같습니다.


<object id=RVOCX classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="320" height="256">
    <param name="src" value="test.rm" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
    <param name="controls" value="ImageWindow">
    <param name="console" value="one">
    <!--[if !IE]> <-->
    <object type="application/vnd.rn-realmedia" data="test.rm" width="320" height="256">
        <param name="controller" value="true" />
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
        <param name="controls" value="ImageWindow">
        <param name="console" value="one">
    </object>
    <!--> <![endif]-->
</object>
<object id=RVOCX classid="clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="320" height="256">
    <param name="src" value="test.rm" />
    <param name="controller" value="true" />
    <param name="autoplay" value="false" />
    <param name="autostart" value="0" />
    <param name="controls" value="ImageWindow">
    <param name="console" value="all">
    <!--[if !IE]> <-->
    <object type="application/vnd.rn-realmedia" data="test.rm" width="320" height="256">
        <param name="controller" value="true" />
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
        <param name="controls" value="ImageWindow">
        <param name="console" value="all">
    </object>
    <!--> <![endif]-->
</object>





출처 : http://www.danfergusdesign.com/classfiles/generalReference/objectTag.html

저작자표시 비영리
Posted by KENSIN
,

티스토리툴바