JW Player 6와 base64 image

JW Player가 5에서 6으로 업그레이드 되면서 좀 바꼈습니다...
일단 제일 크게 바뀐 것은 그 동안 flash 기반의 플레이어를 추구하다가 이제는 완전히 HTML5 기반으로 돌아섰다는 것인 것 같네요..
현재 기본 모드는 HTML5입니다. 따라서 JW Player 6을 사용하려면 HTML5 기반으로 관심을 돌려야 할 것 같습니다...

아울러서 기존에 지원하던 <embed> 방식과 SWFObject 방식의 플레이는 더 이상 지원하지 않습니다. 이제는 Embedder 방식만을 지원을 합니다.. HTML5와 Flash 기반의 두 가지 방식을 여전히 지원을 하지만 자바 스크립트를 사용을 하는 Embedder 방식으로만 플레이를 할 수 있습니다. 따라서 자바 스크립트를 지원하는 티스토리에는 JW Player 6을 도입 할 수 있습니다만, 네이버와 같이 자바 스크립트를 지원하지 않는 사이트에서는 JW Player 6을 도입할 수 없겠습니다. <embed> 방식으로만 사용할 수 있을테니까요.. 하지만 안드로이드 기반이나 iOS 기반의 기기들의 경우는 플래시 기반의 컨텐츠를 볼 수가 없기 때문에 시대적으로는 이쪽 방향으로 나가는 것이 맞는 것 같기는 합니다..

어쨋든 각설하고 기존에 JW Player 5를 기반으로 운영하시는 분들은 스킨 때문에 JW Player 6가 넘사벽이 될 가능성이 생겼습니다. JW Player 6은 기존에 사용하던 zip 파일 기반의 스킨들을 버리고 대신 xml 기반의 스킨을 지원합니다. HTML5가 flash나 zip을 지원하지 않기 때문에 생기는 어쩔 수 없는 선택인 것 같습니다.. flash 기반의 스킨은 아직 어떤지 모르겠네요.. 따라서 JW Player 6으로 넘어가려면.. 일단 스킨부터 다시 제작을 해야 하게 되었네용..

JW Player 6가 zip 베이스의 스킨을 버릴 수 밖에 없었던 이유는 패키징 문제 때문인데.. HTML5 내에서는 zip 파일을 풀 수 있는 방법이 존재하지 않기 때문이랍니다.. 따라서 새로운 패키징 방법으로 찾은 것이 base 64 인코딩을 이용한 xml 방식이군요... 이미지는 png 포맷만을 지원을 하고, 이 png 포맷의 이미지 파일을 base 64 방식으로 인코딩으로 해서 그렇게 인코딩 된 정보를 직접 xml 파일 안에 넣어주는 방식입니다.. 이런 방식으로 이미지를 웹상에 뿌려줄 수 있다니 신기하네요..

아래는 관련 사이트입니다.

JW Player 5에서 6으로 업그레이드 되면서 바뀐점
http://www.longtailvideo.com/support/jw-player/28834/migrating-from-jw5-to-jw6

JW Player 6 스킨제작 관련:
http://www.longtailvideo.com/support/jw-player/28849/skin-xml-reference
http://www.longtailvideo.com/support/jw-player/28847/building-jw-player-skins
base 64 image 인코딩 관련:
http://www.greywyvern.com/code/php/binary2base64

base64 binary 인코더 프로그램
http://sourceforge.net/projects/base64encoder/

 

몇 가지 예제들..

1. HTML 파일 안에서 사용법

<a href="links.html" title="홈페이지"><img src="img/homepage.jpg"></a>
위와 같은 내용이 있을 때 img/homepage.jpg 파일을 압축해서 html 파일에 포함시킬 수 있다. 방법은 먼저 homepage.jpg 파일의 인터넷 전체 주소를 복사를 한다. 그런 후 위 http://www.greywyvern.com/code/php/binary2base64 사이트로 이동해 URI란에 복사해 넣어준 후 그 옆의 "제출" 버튼을 누른다. 그러면 그 결과가 밑의 큰 박스 안에 나오게 되는데 그 결과를 아래와 같이 붙여주면 된다.

<a href="links.html" title="홈페이지"><img src="https://t1.daumcdn.net/cfile/tistory/233CE94456E7134E1F"></a>

2. CSS 안에서의 사용법

.bCenter { height: 12px; margin-left: 12px; display: inline;
background: transparent url(http://yyht.hanmiree.com/files/blog_cnt_lnbtm.png) repeat-x; }

.bCenter { height: 12px; margin-left: 12px; display: inline;
background: transparent url(https://t1.daumcdn.net/cfile/tistory/262F923556E7134E1E"capRight" src="capRight.png" />

<element name="capRight" src="https://t1.daumcdn.net/cfile/tistory/24161B3B56E7134F1E" />

 

위 데이타는 실제 데이타는 아니다. 원본 데이타는 길이가 너무 길어서 짧게 잘라냈다. 원본 데이타는 훨씬 더 길다. 다만 사용법은 잘 보여주고 있다. 위와 같이 하면 html, css, xml 파일 안에 이미지 파일 뿐 아니라 어떤 파일도 첨부 파일이 아닌 html, css, xml 파일 하나에 다 넣을 수가 있다. 이렇게 처리했을 때 좋은 점은 페이지의 loading 시간이 엄청 짧아진다.

JW Player의 경우 xml 파일 안에 관련된 모든 .png 파일을 넣음으로써 HTML5에서 문제가 되었던 Zip 파일 문제를 해결할 수가 있다. 이 때문에 HTML5로 넘어오면서는 zip을 버리고 base64 encoding 기술을 사용을 한 것일테다.