플래시 오브젝트의 관한 궁금증입니다.

[msrband]

이번에 플래시에 관련된 자바스크립트를 짜다가 의아한 점을 발견하여 이렇게 글을 올려봅니다.
제가 작성하려던 자바스크립트 함수는 플래시 오브젝트의 경로를 수정하는 것입니다. 함수의 인자로 플래시 경로를 넘겨줘서 해당 함수를 호출할 때마다 한 플래시 오브젝트에서 다른 플래시를 보여주는 것이 저의 의도였습니다.

플래시는 Hixie method를 사용하여 웹 페이지에 첨부하였습니다. 막상 이 방식을 사용하여 익스플로러, 파이어폭스, 오페라, 사파리 4가지 브라우저에서 테스트를 해보니 익스플로러와 오페라는 바깥에 있는 object를 수행하고 파이어폭스와 사파리는 바깥의 object의 classid 속성을 인식못하여 내부 object를 수행하는 듯 했습니다.

Code: Select all

	
<object id="flvobj1" width="800" height="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0" >
	<param name="movie" value="http://testurl/flv/main001.swf" />
	<!-- Hixie method -->
	<!--[if !IE]> <-->
	<object id="flvobj2" type="application/x-shockwave-flash" data="http://testurl/flv/main001.swf" width="800" height="400"></object>
	<!--> <![endif]-->
</object>

그리고 이미지 링크를 클릭하면 임의의 주소를 함수 인자로 넘겨주어 각 브라우저에 맞도록 플래시 오브젝트의 movie나 data 속성의 값을 변경하는 함수를 작성하였습니다.

Code: Select all

var un = navigator.appName;

function changeSwf(IEflvObj, OtherflvObj, imgSrc)
{
	var flvObj;

	/* 익스플로러와 오페라는 Hixie method에서 classid를 사용하는 외부 object 객체를 참조한다 */
	if (un == 'Microsoft Internet Explorer' || un == 'Opera')
	{
		/* classid를 사용하는 플래시 오브젝트 id */
		flvObj = document.getElementById(IEflvObj);
		/* 플래시 오브젝트의 경로 수정 */
		flvObj.setAttribute('movie', imgSrc);
	}
	/* 파이어 폭스나 사파리는 Hixie method에서 내부 object 객체를 참조한다. */
	else {
		/* 나머지 브라우저용 플래시 오브젝트 id */
		flvObj = document.getElementById(OtherflvObj);
		/* 플래시 오브젝트의 경로 수정 */
		flvObj.setAttribute('data', imgSrc);
	}
}

이렇게 작성한 코드를 실제 html에서는 이미지 링크 태그에서 onClick 이벤트가 발생하면
각 이미지 별로 고유의 플래시 주소를 인자로 넘겨주어 처리하도록 했습니다. 여기서 자바스크립트 함수의 인자로 들어간 flvobj1과 flvobj2은 플래시 오브젝트 id를 의미합니다.

Code: Select all

<td><a href="#" onClick="changeSwf('flvobj1', 'flvobj2', 'http://testurl/flv/main001.swf'); return false;"><img src="http://testurl/panelPage/thumb01.jpg" width="158" height="158"  alt="Test1" /></a></td>
<td><a href="#" onClick="changeSwf('flvobj1', 'flvobj2', 'http://testurl/flv/main002.swf'); return false;"><img src="http://testurl/panelPage/thumb02.jpg" width="158" height="158"  alt="Test2" /></a></td>
<td><a href="#" onClick="changeSwf('flvobj1', 'flvobj2', 'http://testurl/flv/main003.swf'); return false;"><img src="http://testurl/panelPage/thumb03.jpg" width="158" height="158"  alt="Test3" /></a></td>

이 코드가 익스플로러와 파이어폭스에서는 제 의도대로 작동을 합니다. 이미지를 클릭하면 한 화면에서 플래시가 변경되어 플레이 되는거죠. 하지만 오페라와 사파리에서는 작동을 하지 않습니다. 오페라는 익스플로러와 같은 오브젝트를 참조하고 사파리는 파이어폭스와 같은 오브젝트를 참조하는데 익스플로러와 파이어폭스에서는 작동하지만 나머지 둘은 제대로 작동하지 않더군요.

제가 아직 크로스 브라우징이나 웹 표준에 대해서 정확히 아는 점이 없어서 이러한 결과가 나온것 같습니다. 위에서 언급한 4가지 브라우저 모두에서 제대로 동작할 수 있는 코드를 작성하기 위해서 제 코드의 어느 잘못된 부분을 수정해야 할지 알고 싶습니다. 특히나 저희 사이트에 맥으로 접속하시는 분들이 몇 분 계시는데 그 분들에게는 클릭을 해도 플래시가 변경되지 않고 계속 똑같은 영상만 나오는 상황입니다.

많은 고수분들의 조언 부탁 드립니다~ 감사합니다

[hyeonseok]

<object>는 외부 플러그인을 사용하기 때문에 자바스크립트로 접근하기에 한계가 있었습니다. 그래서 저 같은 경우 <object>와 관련있는 값은 DOM으로 접근하기보다는 <object>를 없애고 다시 집어 넣는 방식을 사용합니다. 아마 그렇게 하시는 것이 호환도 더 잘되고 안정적일 것입니다.