2009년 03월 15일
웹용 플래시 재생 플러그인 CSN WebSWF 0.3
SWF 파일을 재생할 때 재생/일시정지/정비 (Play/Pause/Stop) 을 쓸 수 있게 해주는 CSN WebSWF 테스트버전 (v0.3) 입니다.
SWF (플래시) 파일로 된 UCC를 퍼 오실 때 자동 재생이나 플레이 위치 조정이 안 되어 곤란하셨던 경우가 종종 있으실 겁니다.
CSN WebSWF는 이런 플래시 동영상들에 틀을 씌워서, Youtube 등 일반적인 동영상 플레이어들과 비슷하게 재생 제어가 가능하도록 만들어주는 도구입니다.
추가하는 과정은 약간 번거로울 수는 있지만, 복잡한 기능을 쓰지 않는다면 크게 어렵지는 않습니다.
(적용 사례)
보다 자세한 사용 방법은 아래의 사용설명서를 참조해 주세요.
(개발자 입장에서 쓰다 보니 설명서가 좀 읽기 어렵게 쓰여졌습니다. 쉽게 고쳐 주실 분 혹시 계신가요...;;)
* 기능
- 같은 서버 (예: 같은 이글루스 업로드 서버) 에 있는 SWF 동영상 파일을 제어합니다.
- 재생 / 일시정지 / 멈춤
- 새 창에서 원본 띄우기
- 영상 탐색 스크롤바
- 볼륨 조절
- 자동 재생/자동 반복재생 모드 (NEW)
- 자동 반복 시 영상의 특정 프레임에서 재시작 기능 (NEW)
- 영상 프리뷰 이미지 기능 (NEW)
- 퍼가기 주소/태그 출력 기능 (NEW)
* 사용법 (이글루스)
- 재생하고 싶은 SWF 파일을 Egloos에 "파일 추가" 로 업로드합니다.
- 파일이 첨부되면 이 파일이 어느 서버에 업로드 되었는지 확인합니다.
(예: 경로가 http://pds12.egloos.com/...이면 12번 서버) - 아래 목록 중, 업로드된 SWF 파일과 같은 서버의 SWFX_exx.swf 파일을 찾아주세요.
10번 서버 : http://pds10.egloos.com/pds/200903/15/14/c0033814_swfx_e10.swf
11번 서버 : http://pds11.egloos.com/pds/200903/15/14/c0033814_swfx_e11.swf
12번 서버 : http://pds12.egloos.com/pds/200903/15/14/c0033814_swfx_e12.swf
13번 서버 : http://pds13.egloos.com/pds/200903/15/14/c0033814_swfx_e13.swf
15번 서버 : http://pds15.egloos.com/pds/200903/15/14/c0033814_swfx_e15.swf - "멀티미디어-기타" 기능으로 CSN WebSWF를 업로드합니다.
이 때, 멀티미디어 파일의 주소를 아래와 같이 입력하시면 됩니다. (중요)
http://pds??.egloos.com/pds/200903/15/14/c0033814_swfx_e??.swf?target=(재생할 SWF 파일주소)&width=(재생할 SWF 폭)&height=(재생할 SWF 높이) - 만일 그 밖의 부가 기능을 사용할 경우 위의 추가 주소 뒤에 아래의 "부가 기능" 목록을 참조하여 매개변수를 추가해 주세요.
* 사용 예제
SWF 파일을 아래 주소에 업로드하고,
http://pds11.egloos.com/pds/200903/15/14/c0033814_toho.swf
멀티미디어 삽입으로 아래 주소를 추가합니다.
http://pds11.egloos.com/pds/200903/15/14/c0033814_swfx_e11.swf?target=http://pds11.egloos.com/pds/200903/15/14/c0033814_toho.swf&mwidth=480&mheight=360
위와 같이 추가할 경우, 포스팅 맨 위에 있는 적용 사례와 같이 동작합니다.
* 부가 기능
플레이어 사용 시 아래와 같은 부가 기능들을 추가로 사용할 수 있습니다.
위의 SWF 파일 주소 맨 뒤 (...&height=(...) 바로 뒤) 에 아래 목록에서 필요한 변수를 붙여 주세요..
- 자동 재생
플레이어가 로드되는 순간 바로 재생을 시작합니다.
추가할 변수: &autoplay=1 - 자동 반복 재생
영상 재생이 끝나는 순간 자동으로 처음부터 반복해 재생합니다.
추가할 변수: &autoreplay=1 - 자동 반복 시 특정 지점에서 재시작
영상 재생이 끝나는 순간 특정 프레임 위치에서부터 재생을 반복합니다.
추가할 변수: &returnpos=(프레임 넘버) - 영상 프리뷰 이미지 표시
영상을 재생하기 전에 프리뷰를 보여줍니다. 이 프리뷰 파일은 따로 웹 서버에 올려져 있어야 하며, JPG, GIF, PNG 파일을 지원합니다. (단, 프리뷰 파일은 반드시 같은 서버에 있을 필요는 없습니다.)
추가할 변수: &preview=(프리뷰 파일 주소)
※ 만일 이 매개변수 추가 후 embed 태그가 제대로 표시되지 않으면, 주소 맨 끝에 "&" 을 한 글자 더 붙여 주십시오. - 영상 프리뷰 화면에 맞춤
위의 프리뷰 이미지를 화면에 꽉 채워 표시합니다.
추가할 변수: &preview_fit=1
* 주의사항
- 이글루스가 파일 관리 정책을 변경하였는지, "퍼가기" 메뉴의 동작이 정상적으로 되지 않습니다. (외부에서 이글루스에 업로드 된 SWF 파일을 불러올 수 없게 되었습니다.)
이 점 참고해 주시기 바랍니다. - 사용할 때는 주소, 폭, 높이가 정확히 입력되었는지 꼭 확인해 주세요.
특히 폭과 높이가 SWF 파일의 실제 크기와 달라질 경우 영상이 정 중앙에 나타나지 않거나 넘쳐서 보이지 않게 됩니다. - 액션스크립트를 사용해 프레임을 제어하는 SWF 파일에는 가급적 사용하지 않을 것을 권장합니다.
재생/탐색 시에 예기치 못한 동작을 일으킬 수 있습니다. - 일부 SWF 파일은 내부에 무비 클립을 갖고 있어서 그 무비 클립만으로 동영상이 재생되는 경우가 있습니다. 이 경우에는 재생/정지 기능이 제대로 동작하지 않을 수 있습니다.
- 파일들의 서버를 꼭 일치시켜 주십시오.
Actionscript의 네트워크 보안 정책으로 인해, 완전히 동일한 도메인에 속하지 않은 SWF 간에는 서로 제어가 불가능합니다.
따라서, 서버 번호가 달라지면 재생/일시정지/멈춤 버튼이 동작하지 않게 되오니 유의 부탁드립니다. - 이 플레이어는 현재 테스트 버전입니다.
버그나 문제가 있을 경우 이 포스팅에 댓글을 달아주시거나 제작자 (cprov@cpsite.net) 에게 연락주십시오. - 나중에 혹시 기능 업데이트를 하게 된다고 해도, 이글루스의 파일 업로드 기능 특성 상 같은 파일에 덮어쓰는 것이 불가능합니다.
업데이트 시에는 이 이글루에 공지할 예정이오니, 그 경우 번거로우시겠습니다만 수동으로 새 플레이어 주소로 수정해 주십시오.
* 필요하신 분들을 위한 기술적 정보
- Actionscript 2.0으로 제작되었고, LoadMovie를 이용하여 플래시 파일을 불러옵니다.
- 이글루스의 업로드 파일 경로는 어느 블로그에서든지 pds (10~15, 14 제외) .egloos.com 아래에 정해지기 때문에,
굳이 플레이어 자체를 퍼 가서 같이 업로드 하지 않으셔도 위에 적힌 주소를 이용하시면 그대로 사용이 가능합니다.
(혹시 pds10~15 외의 번호, 또는 pds14번에 파일을 올려보신 분이 계시면 제보 바랍니다!) - 만일 이글루 외의 블로그 또는 홈페이지에 사용하고자 하신다면 플레이어 SWF 파일도 같이 퍼 가실 필요가 있습니다.
(http://pds15.egloos.com/pds/200903/15/14/c0033814_swfx.swf)
단, 어디서건, 재생할 SWF 파일과 플레이어 SWF 파일이 같은 도메인에 있어야 한다는 것을 기억해 주십시오.
(따라서, 곳에 따라 적용 불가능할 수도 있습니다.)
* 그 밖에
- 이 플레이어는 Character Shift Network (http://www.charactershift.net/) 의 Chelsona가 제작하였습니다.
- 이 플레이어는 SWF 파일에 대한 재생 제어를 희망하시는 블로거 분들을 위해 제작한 것으로, 불러올 수 있는 개별 SWF 동영상들의 원 제작자 분들의 제작 의도 또는 저작권을 침해하고자 제작된 것이 아닙니다.
- 이 플레이어는 재생, 정지시키는 것 외에 불러온 SWF 파일에 어떠한 의도적인 Actionscript 접근/제어도 하지 않습니다.
# by | 2009/03/15 23:52 | CSN WebSWF | 트랙백 | 핑백(1) | 덧글(15)



☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
... CSN WebSWF의 새 버전 (0.3) 이 나온 관계로, 이 포스팅은 문을 닫습니다.http://chelsona.egloos.com/4880412 를 방문해 주세요. ... more
그런데 죄송하지만, 샘플로 각각의 기능을 사용해서 영상을 업로드하는
태그의 샘플을 볼 수가 있을까요? 명령어를 어디에 어떻게 넣어야 하고
전체적인 태그 내에서 재생기 파일의 위치, swf 파일의 위치, 미리보기
파일의 위치 등을 글만 읽어서는 쉽게 눈에 안들어오는군요[..]
샘플이 있다면 이해가 쉽게 되지 않을까 합니다
jpg 이미지에서 .jpg 없애고 확장자 없앤 채로 올리니까 인식이 되는 현상이......
그리고 자동 반복, 특정 프레임에서 반복의 경우에는 어떻게 쓰는지 잘 모르는건지 먹히지 않는
느낌이 듭니다.
<embed style="WIDTH: 532px; HEIGHT: 424px" src="http://pds11.egloos.com/pds/200903/22/77/c0038577_swfx.swf?target=http://pds11.egloos.com/pds/200903/22/77/c0038577_luca.swf&mwidth=512&mheight=384&returnpos=1000&autoreplay=1&preview=http://pds10.egloos.com/pds/200903/22/77/c0038577_image1" type="application/x-shockwave-flash" autostart="0" allowscriptaccess="never"></embed>
이런 태그로 작성했습니다.
요 몇일 이런저런 사정으로 미처 신경을 못 쓰고 있었습니다.
- autoreplay가 왠지 잘 작동하지 않는 듯한 느낌이 드네요. 이번 주말쯤까지는 상황 확인해서 업데이트를 진행해 보겠습니다.
- .jpg관련 문제는 아마, src="~" 안에 들어간 주소의 맨 마지막이 .jpg가 되면, embed 태그가 해당 소스를 JPEG 그림파일로 해석하면서 생기는 오류인 듯 합니다. 미리보기 주소를 다른 매개변수보다 앞에 적으시거나, src 주소 맨 끝에 "&" 을 한 글자 덧붙여 주시면 해결됩니다.
- 매개변수가 많아지면서 태그가 복잡해지는 느낌이 있어서, 태그 메이커를 만들어볼까 합니다. 이것도 아마 주말 쯤에 만들게 되지 않을까 싶습니다.
혹시 실례가 안 된다면 소스 공유를 요청드려도 될까요?
저도 한번 만져보고 싶은 생각이 드네요^^
AS 3.0에 아직 통달하지 못해, 기존에 여러 번 써 봤던 2.0으로 짜 보았습니다.
소스의 경우에는 나름 애착을 갖고 작업한 거다 보니 공개를 해도 될까 스스로 망설여지는 부분이 조금 있습니다; 일단 플레이어가 좀 더 안정될 때까지는 당분간 비공개 상태로 두고자 합니다. 죄송합니다.
그나저나 티스토리는 서버 수가 너무 많아서 꽤나 힘들어지네요.
한번 사용해 봐야겠습니다.
저 역시 배치기님처럼 티스토리에 사용하느라 50여번의 시도 끝에 간신히 성공했습니다! <<뿌듯!
P.S. 전체화면..이랄까 full screen 기능은 없나요?
http://pds22.egloos.com/pds/201107/01/70/c0033814_swfx_e22.swf 를 사용해보세요. 동일 링크를 재업해보았습니다.
http://pds22.egloos.com/pds/201107/01/70/c0033814_swfx_e22.swf?target=http://pds22.egloos.com/pds/201102/04/48/1234.swf&width=480&height=360 를 멀티미디어 기타에 입력하면 영상이 안뜨구요.
http://pds22.egloos.com/pds/201107/01/70/c0033814_swfx_e22.swf?target=http://pds22.egloos.com/pds/201102/04/48/1234.swf&mwidth=480&mheight=360 를 입력하면 영상은 뜨는 데 크기가 조절이 안되네요.
<embed width="480" height="379" src="http://pds22.egloos.com/pds/201107/01/70/c0033814_swfx_e22.swf?target=http://pds22.egloos.com/pds/201102/04/48/1234.swf&mwidth=480&mheight=360"/>
를 직접 입력해주세요.
사족. 영상 귀엽네요 ~.~