Object 대그와 대체 텍스트

티스토리 뷰

프로그래밍/HTML

Object 대그와 대체 텍스트

프링글 2008. 6. 22. 14:22

Object 태그와 대체 텍스트

<object data="" type=""> <p></p> </object>

위의 경우 type에 지정된 적절한 플러그인을 찾을 수 없을 경우, 포함하고 있는 <p></p>의 내용을 대체로 이용하게 된다.

<object data="hello.swf" type="application/x-shockwave-flash">

<object data="hello.png" type="images/png">

<object data="hello.gif" type="images/gif">

<p>Hello!</p>
</object>
</object>
</object>

위의 경우 브라우져가 바깥의 <object>부터 실행을 시도하게 되는데 플러그인 실행에 실패할 경우 안쪽의 object로 실행을 차례로 시도 한다. 각각의 <object>가 자신을 포함하고 있는 상위의 <object>의 대체 컨텐츠 역할을 하게 되고 최종의 <p>는 상위 gif 이미지 <object>의 대체 기능을 하게 된다.

Flash Object 표준으로 삽입

Macromedia Default

이 코드는 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 과 위치를 지정하는 data 만으로 Flash 등을 로딩 할 수 있다 . 하지만 IE 는 data 를 참조하여 Flash player 를 로딩하지 못하므로 IE 에서는 작동을 하지 않는다. 그래서 param 으로 무비 정보를 적어주어야 한다.

이렇게 하면 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 들도 페이지에 삽입 할 수 있다.

IE 는 classid 로 Flash player 를 로딩하고 embed 된 object 는 conditional comment 로 주석으로 인식이 된다. 표준 브라우져들은 첫번째 classid 에 해당하는 object 가 없기 때문에 object 를 로딩하는데 실패를 하게 되고 fallback 인 하위 element 를 불러오게 된다. Conditional comment 는 IE 전용의 코드이기 때문에 영향을 받지 않고 주석으로 처리 된다. 하위 object 안의 img 는 Flash player 가 없을 경우의 fallback 을 제공한 것이다.

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방식으로 넘기면 된다.

출처 : 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로 지정하면 우측 클릭을 해도 반응을 하지 않습니다.

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

: 동영상 등을 재생할때 화면을 클릭하면 일시 정지되거나 다시 재생하는 기능을 제어하는 기능입니다. true / false로 제어합니다.

: 화면의 비율을 자동으로 제어할 것인지, 말 것인지를 제어하는 기능입니다.
true로 해 놓으면 원래 정해진 화면 비율로 자동으로 재생됩니다.

: 플레이어창이 뜨면서 자동실행 여부, 즉 autostart와 같은 기능입니다. false로 해놓으면 재생 버튼을 클릭해야 플레이 됩니다.

: hidden 태그와 같은 기능으로 false로 지정시 플레이어가 보이지 않게 됩니다.

: 이 기능은 플레이어 우측의 볼륨 조절기능과 음소거 기능을 제어하는 기능입니다.
false로 지정하시면 플레이어에서 볼륨 조정과 음소거 조절하는 부분이 사라집니다.

: 이 부분은 플레이어 아래에 파일의 디스플레이 정보를 출력할 것인가 말것인가를 제어하는 부분입니다.
true로 해 놓을 경우 아래에 쇼, 클립, 만든이, 저작권 등의 정보가 출력됩니다.

: 재생 구간을 보여주는, 재생이 되면서 옆으로 움직이는 막대, 트랙커를 제어하는 기능입니다.
이 부분을 움직여서 원하는 부분만을 들을 수도 있지요.
false로 지정시 트랙커가 사라집니다.

: 플레이어 아래에 버퍼링과 남은시간/총시간 을 보여주는 한줄의 정보창을 제어하는 부분입니다.
false로 해놓으면 보이지 않습니다.

: 마우스 오른쪽 클릭시 나타나는 메뉴를 제어하는 기능입니다.
false로 해놓으면 우측 클릭을 해도 등록정보 등이 있는 메뉴가 나타나지 않습니다.

: 이 부분은 플레이어의 뒤로 가기(▶▶), 앞으로 가기(◀◀) 등의 버튼을 제어하는 부분입니다.
false로 해놓으면 재생 버튼과 정지 버튼만 출력됩니다.

: 동영상 등의 자막이 있을때 이를 제어하는 기능입니다.
음악 파일 재생시는 false로 해놓으시면 됩니다.

: 재생이 끝났을 경우 이 부분을 true로 해놓으면 처음으로 돌아갑니다.
false로 해 놓으면 끝부분에 머물러 있습니다.

: <embed>의 loop와 같은 기능으로 플레이 반복 횟수를 결정합니다.
'-1'로 해놓으면 무한 반복 됩니다.

: 재생시 자동으로 설정할 볼륨 량을 지정해주는 부분입니다.
보기와 같이 0으로 해놓으면 최대 볼륨으로 재생됩니다.

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

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

소스 코드 타입 : php
<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 기존 방식 -

소스 코드 타입 : php

<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만으로 플래쉬나 동영상을 걸 수 있습니다.
아래가 그 방법 입니다.

소스 코드 타입 : php

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

수정본 입니다. Flash 재생을 못하는 브라우져를 위해서 추가된 사항입니다.

소스 코드 타입 : php

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

이것은 플래쉬 용입니다.

소스 코드 타입 : php

<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용입니다.

소스 코드 타입 : php


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

</object>

이것은 mov 파일용입니다.

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

.aif audio/x-aiff
.asf video/x-ms-asf
.avi video/x-msvideo
.mov video/quicktime
.mp3 audio/mpeg
.mpeg video/mpeg
.mpg video/mpeg
.wav audio/wav

하나씩 웹표준을 지켜가려고 노력해봅시다 ^^;

추가... 06년 10월 26일
예제로 몇개 더 올려봅니다.

소스 코드 타입 : php

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

'프로그래밍 > HTML' 카테고리의 다른 글

HTML Table 태그 속성 (0)	2008.06.22
img tag - 이미지의 이미지 저장 탭 없애기 (0)	2008.06.22

공유하기 링크

페이스북
카카오스토리
트위터

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

프링글이 하는 이야기

티스토리 뷰