본문 바로가기

Experience

Tistory에서 SWF 파일 업로드, FLV Player 달기

블로그에 SWF파일 올리기 참 번거로습니다. 매번 똑같은 절차로 고생한 후 SWF를 달곤합니다. 그래서 이젠 서식으로 만들어놓고 사용합니다. 이왕 쓰는거 FLV Player도 하나 달아 보겠습니다.

SWF 업로드

파일 첨부 기능으로 swf파일을 업로드 합니다. 글쓰기 창에서 확인된 코드는 다음과 같습니다. 코드에 (##)은 티스토리 치환자 ##입니다. 글 올릴때 코드가 치환되 버리기 때문에 임시로 괄호로 묶었습니다.



[(##)_1C|cfile10.uf@110944354CB8D558197E6A.swf|
                    filename="player.swf"
                    filemime="application/x-shockwave-flash"
|_(##)]


미리보기 버튼을 눌러 브라우져에서 확인된 코드는 다음과 같습니다.

<span id="아이디"></span>
<script type="text/javascript">
    writeCode2(getEmbedCode('player.swf 파일의 서버상 경로',
                                            '너비','높이','아이디',
                                            '#FFFFFF','', undefined, 'transparent'),
                                            '아이디');
</script>


위 코드에서 swf 경로를 나타내는 부분과 너비, 높이, 아이디 값은 업로드 할때마다 각각 다르게 정해질 것입니다. 이 코드를 복사하여 글쓰기 창에서 첫번째 코드 덮어씁니다. 미리보기하면 아래처럼 변함없이 swf가 떠야겠죠. (원래 플레이는 안됩니다.)


외부 FLV 삽입

위에서 저는 player.swf 파일을 업로드 했습니다. 저는 앞으로 FLV를 플레이할때 이 SWF 파일을 사용할 것입니다. 이 방법은 theflashblog.com 블로그에 동영상 띄운걸 보고 player.swf 파일과 함께 살짝 가져온 것입니다.

위 파일을 다운받아 압축을 푸신후 발행되지 않을 글로 이 swf 파일을 업로드 하세요. 한번만 업로드하고 업로드된 swf 파일 주소는 앞으로 FLV를 삽입할 때 마다 계속 사용할 겁니다. 위에서 두번째 코드를 통해 알게된 제 player.swf 파일의 서버상 경로를 아래 코드에 그대로 적용해 주었습니다.

<embed height="380" width="630"
           flashvars="height=380
                          &width=640
                          &file=FLV 파일 주소.flv
                          &image=최초 멈춤화면에서 보여줄 이미지 경로"
           allowfullscreen="true"
           allowscriptaccess="always"
           src="player.swf파일의 서버상 경로">

위 코드가 player.swf 파일을 통해 FLV를 재생시킬 수 있는 코드입니다. 서식으로 지정해 사용하면 편리합니다. player.swf 파일 경로 확인하는거 잊지 마세요. 아래는 최초 멈춤화면에서 보여줄 이미지 경로를 지정한 경우 입니다. 지정하지 않으면 아마 검은 화면이 처음에 뜰겁니다.

player.swf 파일

어렵사리 player.swf 파일의 출처를 알아보니 JW Player이라는 소스가 공개된 프로그램 이였습니다. 진작 알았다면 이런글 아마 안썼을 텐데요.(플레이되는 화면 좌하단에 있는 로고는 왜 진작에 못봤냔 말이닷!) 사이트 보니 사용하기 쉽게 설명도 잘 되어 있고 다운로드 받으면 그안에 player.swf 파일이 있습니다. 검색해 보니 JWPlayer에 대해 포스팅이 많이 되어 있군요.


외부 SWF 삽입

서버가 다르면 외부자원을 사용하는 SWF의 경우에 정상작동을 하지 않는 경우가 았습니다만, 일반적으로 다음 코드를 통해 간단히 펌질 할 수 있습니다.

<object type="application/x-shockwave-flash"
            width="630" height="380">
            <param name="movie" value="SWF 주소"/>
            <param name="allowFullScreen" value="true"/>
            <param name="allowscriptaccess" value="always"/>
            <embed type="application/x-shockwave-flash"
                        allowscriptaccess="always"
                        allowfullscreen="true"
                        width="630" height="380"
                        src="SWF 주소"/>
</object>

이렇게 SWF파일을 마구 가져다 쓰는걸 막기 위해 개발자는  SWF파일에 URL 검사하는 구문을 사용하기도 합니다. 펌질을 할때는 되도록이면 저작권과 출처를 확실히 하도록 합시다.